/* ============================================================
   VANZVZN — brand.css
   Compiled v1.0 "Calm" design tokens, shared by every page on
   vanzvzn.com (marketing site + client portal). Source of truth:
   the "VANZVZN Design System" project (tokens/*.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Core hues ---- */
  --depth-blue:        #1C4587;
  --depth-blue-hover:  #173A73;
  --periwinkle:        #8388BE;
  --sage:               #93AE97;

  /* ---- Neutrals & base ---- */
  --ink:                #233842;
  --slate:              #2E4A57;
  --steel:              #5E7078;
  --mist:               #F4F1EC;
  --paper:              #FBFAF8;
  --white:              #FFFFFF;
  --hairline:           rgba(46,74,87,0.14);
  --hairline-strong:    rgba(46,74,87,0.18);
  --hairline-on-dark:   rgba(255,255,255,0.14);

  /* ---- Warm signals — alerts ONLY ---- */
  --amber:              #C89646;
  --clay:               #BE7A54;
  --amber-ink:          #8A6624;
  --clay-ink:           #95552F;

  /* ---- Surface tints ---- */
  --tint-blue:          #E6ECF5;
  --tint-periwinkle:    #ECEDF6;
  --tint-sage:          #EAF0EA;
  --tint-clay:          #F7EFE8;
  --tint-amber:         #F5EBD8;
  --on-tint-blue:       #1C4587;
  --on-tint-periwinkle: #5A5F98;
  --on-tint-sage:       #3E5E44;
  --on-tint-clay:       #95552F;
  --on-tint-amber:      #8A6624;

  /* ---- Audit states — score → state → color ---- */
  --state-strong:       #93AE97;
  --state-steady:       #8388BE;
  --state-monitor:      #C89646;
  --state-urgent:       #BE7A54;
  --dot-empty-dark:     rgba(255,255,255,0.18);
  --dot-empty-light:    rgba(46,74,87,0.14);

  /* ---- Semantic aliases ---- */
  --text-body:          var(--ink);
  --text-muted:         var(--steel);
  --text-on-dark:       var(--mist);
  --text-eyebrow:       var(--periwinkle);
  --surface-page:       var(--paper);
  --surface-card:       var(--white);
  --surface-fill:       var(--mist);
  --surface-dark:       var(--slate);
  --border-hairline:    var(--hairline);
  --border-strong:      var(--hairline-strong);
  --action:             var(--depth-blue);
  --action-hover:       var(--depth-blue-hover);
  --link:               var(--depth-blue);
  --focus-ring:         rgba(131,136,190,0.15);
  --selection-bg:       var(--periwinkle);

  /* ---- Fonts ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Type scale ---- */
  --text-display: 64px;
  --text-h1:      44px;
  --text-h2:      32px;
  --text-h3:      22px;
  --text-small:   14px;
  --text-label:   12px;
  --leading-display: 0.96;
  --leading-tight:   1.08;
  --leading-heading: 1.2;
  --leading-body:    1.6;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-label:   0.16em;
  --tracking-label-wide: 0.24em;
  --measure-body: 65ch;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px; --sp-10: 120px;
  --container:      1120px;
  --container-doc:  840px;

  /* ---- Radii ---- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius:      6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-pill: 100px;

  /* ---- Borders / focus / elevation ---- */
  --border:         1px solid var(--hairline);
  --border-strong:  1px solid var(--hairline-strong);
  --border-on-dark: 1px solid var(--hairline-on-dark);
  --focus-shadow:   0 0 0 3px var(--focus-ring);
  --shadow-overlay: 0 12px 40px -12px rgba(35,56,66,0.28);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur:      0.2s;
  --dur-slow: 0.5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--paper); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}