/* ============================================================
   VISTEX — Design Tokens
   Art direction: "Clinical Depth"
   Blue = structure · Aqua = water/energy · Red = signal only
   ============================================================ */

:root {
  /* ---------- 1. Brand ramps ---------- */
  --blue-50:  #eef0fb;
  --blue-100: #dde1f7;
  --blue-200: #bbc3ef;
  --blue-300: #98a4e6;
  --blue-400: #6b79d2;
  --blue-500: #4553b4;
  --blue-600: #2e3995;  /* brand */
  --blue-700: #262f7c;
  --blue-800: #1e2562;
  --blue-900: #171c4a;
  --blue-950: #0d1030;

  --aqua-50:  #e6f7fe;
  --aqua-100: #ccefFC;
  --aqua-200: #99dff9;
  --aqua-300: #66cff6;
  --aqua-400: #33bff3;
  --aqua-500: #00a6e6;  /* brand */
  --aqua-600: #0089bd;
  --aqua-700: #006b94;
  --aqua-800: #004e6b;
  --aqua-900: #003042;

  --red-100: #fde3e4;
  --red-400: #f4595f;
  --red-500: #ed1e26;   /* brand — SIGNAL ONLY */
  --red-600: #c81219;

  /* ---------- 2. Neutral ramp (cool paper) ---------- */
  --n-0:   #ffffff;
  --n-25:  #fbfcfe;
  --n-50:  #f5f7fc;
  --n-100: #edf1f8;
  --n-200: #dfe5f0;
  --n-300: #c6cedf;
  --n-400: #9aa3bc;
  --n-500: #6e7893;
  --n-600: #4c5570;
  --n-700: #343c55;
  --n-800: #20263a;
  --n-900: #111527;
  --n-950: #070a16;

  /* ---------- 3. Semantic — LIGHT ---------- */
  --bg:          var(--n-25);
  --bg-sunk:     var(--n-50);
  --surface:     var(--n-0);
  --surface-2:   var(--n-50);
  --surface-3:   var(--n-100);
  --surface-inv: var(--blue-900);

  --text:        var(--n-900);
  --text-2:      var(--n-600);
  /* --n-500 (#6e7893) measured 3.89:1 worst-case against --surface-3, under AA
     for the small labels and form notes that use it. #5f6987 clears every
     surface in the light ladder at 4.81:1 or better. */
  --text-3:      #5f6987;
  --text-4:      #79839f;
  --text-inv:    var(--n-0);

  --border:      color-mix(in srgb, var(--n-900) 10%, transparent);
  --border-2:    color-mix(in srgb, var(--n-900) 6%, transparent);
  --border-lit:  color-mix(in srgb, var(--blue-600) 26%, transparent);

  --accent:      var(--blue-600);
  --accent-2:    var(--blue-700);
  --accent-soft: color-mix(in srgb, var(--blue-600) 8%, transparent);
  --link:        var(--blue-600);
  --signal:      var(--red-500);
  --signal-soft: color-mix(in srgb, var(--red-500) 10%, transparent);
  --water:       var(--aqua-500);
  --on-accent:   #ffffff;
  --wa:          #25d366;

  /* Tinted elevation — shadows carry brand hue, never pure black */
  --shadow-1: 0 1px 2px rgba(20,32,72,.05), 0 2px 8px -2px rgba(20,32,72,.06);
  --shadow-2: 0 4px 12px -4px rgba(20,32,72,.10), 0 16px 36px -18px rgba(20,32,72,.22);
  --shadow-3: 0 8px 24px -8px rgba(20,32,72,.14), 0 36px 72px -32px rgba(20,32,72,.32);
  --shadow-accent: 0 12px 32px -12px color-mix(in srgb, var(--blue-600) 55%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--aqua-500) 45%, transparent);

  --grain-opacity: .035;
  --aurora-opacity: .55;

  color-scheme: light;
}

/* ---------- 4. Semantic — DARK ---------- */
[data-theme="dark"] {
  --bg:          var(--n-950);
  /* bg-sunk must sit ABOVE bg in dark mode, not below it. At #04060f the
     difference from --bg was 0.0013 luminance — invisible, so every tinted
     band looked identical to the page and the whole site read as one flat
     dark field. Raised into a real elevation ladder. */
  --bg-sunk:     #0c1224;
  --surface:     #131b34;
  --surface-2:   #1a2443;
  --surface-3:   #223055;
  --surface-inv: var(--n-0);

  --text:        #eaeeff;
  --text-2:      #aab3d4;
  /* nudged up with the elevation ladder: on the raised --surface-2 the old
     #7d87ab measured 4.30:1, just under AA. #8b95b8 clears it at 5.15:1. */
  --text-3:      #8b95b8;
  --text-4:      #69739a;
  --text-inv:    var(--n-900);

  --border:      rgba(255,255,255,.12);
  --border-2:    rgba(255,255,255,.06);
  --border-lit:  color-mix(in srgb, var(--aqua-400) 34%, transparent);

  --accent:      var(--aqua-400);
  --accent-2:    var(--aqua-300);
  --accent-soft: color-mix(in srgb, var(--aqua-400) 12%, transparent);
  --link:        var(--aqua-300);
  --signal:      var(--red-400);
  --signal-soft: color-mix(in srgb, var(--red-400) 16%, transparent);
  --on-accent:   #05101c;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px -2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px -4px rgba(0,0,0,.6), 0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-3: 0 10px 28px -8px rgba(0,0,0,.7), 0 40px 80px -30px rgba(0,0,0,.9);
  --shadow-accent: 0 12px 34px -12px color-mix(in srgb, var(--aqua-500) 50%, transparent);

  --grain-opacity: .05;
  --aurora-opacity: .42;

  color-scheme: dark;
}

/* ---------- 5. Type ---------- */
:root {
  /* Rounded, geometric register throughout — circular bowls and soft terminals.
     Outfit carries the display voice, Plus Jakarta Sans the body (rounder and
     friendlier than Inter at text sizes), JetBrains Mono the technical labels. */
  --font-display: 'Outfit', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-quote:   'Outfit', 'Poppins', sans-serif;

  /* Fluid modular scale — 1.20 mobile → 1.28 desktop, no breakpoints needed */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw,  0.735rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw,  0.938rem);
  --step-0:  clamp(1.000rem, 0.95rem + 0.26vw,  1.125rem);
  --step-1:  clamp(1.200rem, 1.11rem + 0.44vw,  1.440rem);
  --step-2:  clamp(1.440rem, 1.29rem + 0.72vw,  1.843rem);
  --step-3:  clamp(1.728rem, 1.50rem + 1.13vw,  2.358rem);
  --step-4:  clamp(2.074rem, 1.73rem + 1.72vw,  3.018rem);
  --step-5:  clamp(2.488rem, 1.98rem + 2.55vw,  3.863rem);
  --step-6:  clamp(2.986rem, 2.25rem + 3.68vw,  4.944rem);
  --step-7:  clamp(3.583rem, 2.54rem + 5.22vw,  6.328rem);

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --tr-display: -0.035em;
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.02em;
  --tr-mono:    0.06em;
  --tr-label:   0.16em;

  /* ---------- 6. Space & shape ---------- */
  --container:    1280px;
  --container-nr: 1080px;   /* narrow — editorial reading width */
  --measure:      64ch;
  --gutter: clamp(20px, 5vw, 48px);

  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;   --s-10:72px;   --s-11:96px;  --s-12:128px;

  --section-py:    clamp(72px, 10vw, 152px);
  --section-py-sm: clamp(48px, 6vw,  88px);

  /* Softer than v2.0 — the radii carry the same rounded language as the type */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 26px; --r-xl: 34px; --r-2xl: 46px; --r-full: 999px;

  /* ---------- 7. Motion ---------- */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --t-fast: .18s var(--ease-out);
  --t-mid:  .38s var(--ease-out);
  --t-slow: .72s var(--ease-out);
  --t-xslow: 1.1s var(--ease-out);

  --header-h: 94px;
  --z-decor: 0; --z-content: 1; --z-header: 80; --z-overlay: 90; --z-drawer: 95; --z-loader: 100;
}

@media (max-width: 720px) {
  :root { --header-h: 78px; }
}