/* Floww Design Tokens — 2026 refresh
 * =================================================================
 * Single source of truth for colour, type, space, radius, shadow.
 * Regenerated from the "Floww.io Website 2026" Figma file.
 *
 * Architecture (read top → bottom):
 *   1. Primitives      — raw ramps (brand / ocean / slate / …). Mode-independent.
 *   2. Type scale      — fluid H1–H7 + body, responsive via clamp().
 *   3. Semantic layer  — meaning-named tokens. LIGHT is the :root default;
 *                        DARK overrides under [data-theme="dark"], .dark, .theme-dark.
 *   4. Compatibility   — legacy aliases (navy-*, floww-blue, display-*) kept
 *                        so existing pages keep working. Prefer the new names.
 *   5. Reset + utilities (.btn, .chip, .card, .eyebrow, glass/dark primitives).
 *
 * Switch themes by setting `data-theme="dark"` (or class `.dark` / `.theme-dark`)
 * on <html>, <body>, or any container. Light is the default.
 * ----------------------------------------------------------------- */

/* Founders Grotesk Text — licensed brand font.
 * Declared once, in assets/fonts-inline.css (embedded woff). Imported here
 * so any page that links tokens.css alone still gets the brand font.
 * ----------------------------------------------------------------- */
@import url("fonts-inline.css");

/* =================================================================
 * 1 · PRIMITIVES  (raw values — never theme-dependent)
 * ================================================================= */
:root {
  /* --- Font families --------------------------------------------- */
  --font-display: "Founders Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* --- Brand (blue) ramp ----------------------------------------- */
  --brand-50:  rgb(244, 247, 251);
  --brand-100: rgb(230, 238, 250);
  --brand-200: rgb(197, 217, 247);
  --brand-300: rgb(137, 180, 246);
  --brand-400: rgb(70, 140, 246);
  --brand-500: rgb(6, 101, 244);   /* Primary */
  --brand-600: rgb(0, 86, 214);    /* Primary hover */
  --brand-700: rgb(0, 71, 178);
  --brand-800: rgb(0, 57, 143);
  --brand-900: rgb(0, 45, 112);
  --brand-950: rgb(2, 27, 65);

  /* --- Ocean (navy neutral) ramp — the workhorse dark family ----- */
  --ocean-50:  rgb(246, 247, 249);
  --ocean-75:  rgb(242, 244, 247);
  --ocean-100: rgb(236, 239, 244);
  --ocean-150: rgb(229, 234, 241);
  --ocean-200: rgb(212, 220, 232);
  --ocean-300: rgb(169, 187, 213);
  --ocean-400: rgb(123, 151, 193);
  --ocean-500: rgb(95, 130, 183);
  --ocean-600: rgb(64, 98, 150);
  --ocean-700: rgb(53, 82, 126);
  --ocean-800: rgb(38, 59, 91);
  --ocean-900: rgb(21, 31, 46);    /* Canonical default fill / text */
  --ocean-950: rgb(11, 17, 25);

  /* --- Slate (cool grey) ramp ------------------------------------ */
  --slate-50:  rgb(247, 247, 248);
  --slate-100: rgb(238, 239, 242);
  --slate-200: rgb(217, 221, 227);
  --slate-300: rgb(181, 189, 202);
  --slate-400: rgb(141, 155, 175);
  --slate-500: rgb(98, 116, 142);
  --slate-600: rgb(86, 103, 128);
  --slate-700: rgb(72, 86, 107);
  --slate-800: rgb(57, 69, 86);
  --slate-900: rgb(45, 54, 67);
  --slate-950: rgb(27, 32, 39);

  /* --- Accents --------------------------------------------------- */
  --purple-900:  rgb(130, 65, 255);    /* highlight (light theme) */
  --purple-900i: rgb(186, 89, 255);    /* highlight (dark theme) */
  --purple-light: rgb(165, 119, 255);
  --amber-500:   rgb(250, 190, 40);

  /* --- Semantic state ramps -------------------------------------- */
  --success-100: rgb(217, 243, 229);
  --success-700: rgb(26, 184, 98);
  --success-900: rgb(7, 127, 91);
  --success-900i: rgb(3, 210, 53);
  --warning-100: rgb(254, 244, 217);
  --warning-900: rgb(180, 117, 22);
  --warning-900i: rgb(249, 182, 4);
  --danger-50:   rgb(255, 242, 242);
  --danger-100:  rgb(255, 217, 217);
  --danger-900:  rgb(204, 0, 0);
  --danger-900i: rgb(249, 84, 84);
  --info-100:    rgb(222, 243, 255);
  --info-900:    rgb(2, 124, 192);

  /* --- Transparents ---------------------------------------------- */
  --t-brand-5:  rgba(6, 101, 244, 0.05);
  --t-brand-10: rgba(6, 101, 244, 0.10);
  --t-brand-20: rgba(6, 101, 244, 0.20);
  --t-brand-30: rgba(6, 101, 244, 0.30);
  --t-brand-40: rgba(6, 101, 244, 0.40);
  --t-blue-hi-10: rgba(120, 173, 252, 0.10);
  --t-blue-hi-12: rgba(120, 173, 252, 0.12);
  --t-blue-hi-30: rgba(120, 173, 252, 0.30);
  --t-purple-10: rgba(163, 116, 252, 0.10);
  --t-ocean-5:  rgba(21, 31, 46, 0.05);
  --t-ocean-10: rgba(21, 31, 46, 0.10);
  --t-ocean-20: rgba(21, 31, 46, 0.20);
  --t-ocean-30: rgba(21, 31, 46, 0.30);
  --t-ocean-40: rgba(21, 31, 46, 0.40);
  --t-white-5:  rgba(255, 255, 255, 0.05);
  --t-white-10: rgba(255, 255, 255, 0.10);
  --t-white-15: rgba(255, 255, 255, 0.15);
  --t-white-20: rgba(255, 255, 255, 0.20);
  --t-white-40: rgba(255, 255, 255, 0.40);
  --t-white-50: rgba(255, 255, 255, 0.50);
  --t-white-60: rgba(255, 255, 255, 0.60);
  --t-white-70: rgba(255, 255, 255, 0.70);
  --t-white-80: rgba(255, 255, 255, 0.80);
  --t-white-90: rgba(255, 255, 255, 0.90);
  --t-black-5:  rgba(0, 0, 0, 0.05);
  --t-black-10: rgba(0, 0, 0, 0.10);
  --t-black-20: rgba(0, 0, 0, 0.20);
  --t-black-40: rgba(0, 0, 0, 0.40);

  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);

  /* --- Radius ---------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* --- Spacing (4px base) ---------------------------------------- */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-64: 256px;

  /* --- Elevation (blue-tinted, of-a-piece) ----------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 10px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.07);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-blue: 0 12px 32px rgba(11, 108, 249, 0.10);

  --blur-glass: blur(40px); /* @kind other */

  /* Soft brand gradient — a translucent blue→purple wash for CTA blocks and
   * emphasis containers. Layer it over a light ground, e.g.
   * `background: var(--gradient-brand-soft), var(--background-up1);` */
  --gradient-brand-soft: linear-gradient(135deg, rgba(6, 101, 244, 0.10) 0%, rgba(130, 65, 255, 0.06) 100%); /* @kind other */

  /* Portrait hero — a solid 4-stop blue gradient, deep at the top easing to a
   * pale blue at the base (where copy sits). Used by the `portrait` hero. */
  --gradient-hero-portrait: linear-gradient(180deg, #154aa5 0%, #2b6bd3 30%, #93b6ea 64%, #cedef0 100%); /* @kind other */

  /* Card grid gap */
  --grid-gap: 12px;

  /* Page band rhythm */
  --band-pad:       112px;
  --band-pad-tight: 72px;
  --band-pad-xl:    160px;
  /* Blur scale — for translucent surfaces sitting over imagery or gradients. */
  --blur-sm: blur(8px);  /* @kind other */
  --blur-md: blur(24px); /* @kind other */
  --blur-lg: blur(40px); /* @kind other */

  /* --- Container widths ------------------------------------------ */
  --container-default: 1240px; /* @kind spacing */
  --container-wide: 1400px; /* @kind spacing */
  --container-editorial: 880px; /* @kind spacing */
}

/* =================================================================
 * 2 · TYPE SCALE  (fluid; mobile → desktop via clamp, no media queries)
 *   Desktop ceilings: H1 72/68 · H2 64/62 · H3 52/48 · H4 40/40 ·
 *   H5 32/32 · H6 24/28 · H7 22/26 · body-lg 20/28 · body-md 16/24.
 *   Mobile floors:    H1 40/40 · H2 32/36 · H3 32/36 · H4 32/36 ·
 *   H5 24/28 · H6 20/24 · H7 20/21 · body-lg 16/24 · body-md 14/20.
 * ================================================================= */
:root {
  /* Type scale — DESKTOP values (Figma). Mobile values are overridden in the
   * @media (max-width: 980px) block just below this :root. font-size / line-height. */
  --fs-h1: 72px; --lh-h1: 64px;
  --fs-h2: 64px; --lh-h2: 58px;
  --fs-h3: 52px; --lh-h3: 46px;
  --fs-h4: 40px; --lh-h4: 36px;
  --fs-h5: 32px; --lh-h5: 30px;
  --fs-h6: 24px; --lh-h6: 26px;
  --fs-h7: clamp(20px, 19.2px + 0.22vw, 22px); /* legacy, not in the scale table */
  --lh-h7: clamp(21px, 18.9px + 0.55vw, 26px);
  --fs-body-lg: 18px; --lh-body-lg: 26px;
  --fs-body-md: 16px; --lh-body-md: 24px;
  --fs-body-sm: 14px; --lh-body-sm: 20px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-ops: 12px; --lh-ops: 16px;

  /* Type recipes — `font` shorthand, ready to drop on any element.
   * Headings = Founders Regular 400; body = Inter 400. */
  --t-h1: 400 var(--fs-h1)/var(--lh-h1) var(--font-display); /* @kind font */
  --t-h2: 400 var(--fs-h2)/var(--lh-h2) var(--font-display); /* @kind font */
  --t-h3: 400 var(--fs-h3)/var(--lh-h3) var(--font-display); /* @kind font */
  --t-h4: 400 var(--fs-h4)/var(--lh-h4) var(--font-display); /* @kind font */
  --t-h5: 400 var(--fs-h5)/var(--lh-h5) var(--font-display); /* @kind font */
  --t-h6: 400 var(--fs-h6)/var(--lh-h6) var(--font-display); /* @kind font */
  --t-h7: 400 var(--fs-h7)/var(--lh-h7) var(--font-display); /* @kind font */
  --t-body-lg: 400 var(--fs-body-lg)/var(--lh-body-lg) var(--font-sans); /* @kind font */
  --t-body-md: 400 var(--fs-body-md)/var(--lh-body-md) var(--font-sans); /* @kind font */
  --t-body-sm: 400 var(--fs-body-sm)/var(--lh-body-sm) var(--font-sans); /* @kind font */
  --t-caption: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); /* @kind font */
  --t-ops: 400 var(--fs-ops)/var(--lh-ops) var(--font-sans); /* @kind font */
  --t-eyebrow: 500 12px/16px var(--font-sans); /* @kind font */

  --tracking-display: -0.02em; /* @kind other */
  --tracking-display-tight: -0.025em; /* @kind other */
}

/* Type scale — MOBILE values (Figma). Override the desktop scale below 980px. */
@media (max-width: 980px) {
  :root {
    --fs-h1: 40px; --lh-h1: 40px;
    --fs-h2: 32px; --lh-h2: 36px;
    --fs-h3: 32px; --lh-h3: 36px;
    --fs-h4: 32px; --lh-h4: 36px;
    --fs-h5: 24px; --lh-h5: 28px;
    --fs-h6: 20px; --lh-h6: 24px;
    --fs-body-lg: 16px; --lh-body-lg: 24px;
    --fs-body-md: 14px; --lh-body-md: 20px;
    --fs-body-sm: 14px; --lh-body-sm: 20px;
    --fs-caption: 12px; --lh-caption: 16px;
    --fs-ops: 10px; --lh-ops: 14px;
  }
}

/* =================================================================
 * 3 · SEMANTIC LAYER  —  LIGHT (default)
 * ================================================================= */
:root,
[data-theme="light"],
[data-ground="page"],
[data-ground="white"],
.theme-light {
  /* Backgrounds (page → raised) — Figma: Ocean ramp */
  --background-base:   var(--ocean-100);   /* Background.Base  · Ocean.100 */
  --background-down1:  var(--ocean-150);   /* Background.Down1 · Ocean.150 */
  --background-up1:    var(--ocean-75);    /* Background.Up1   · Ocean.75  */
  --background-up2:    var(--ocean-50);    /* Background.Up2   · Ocean.50  */

  /* Surfaces (cards, panels) — Figma: translucent white over the ground */
  --surface-base:         var(--t-white-70);        /* Surfaces.Base         · White 70 */
  --surface-base-hover:   var(--t-white-80);        /* Surfaces.Base Hover   · White 80 */
  --surface-base-invert:  rgba(27, 32, 39, 0.90);   /* Surfaces.Base Invert  · Slate 90 */
  --surface-subtle:       var(--t-white-40);        /* Surfaces.Subtle       · White 40 */
  --surface-subtle-hover: var(--t-white-60);        /* Surfaces.Subtle Hover · White 60 */
  --card-hover-fill:      var(--white);             /* card :hover — full white on light */
  --surface-solid:        var(--ocean-100);         /* Surfaces.Solid        · Ocean.100 */
  --surface-solid-hover:  var(--ocean-75);          /* Surfaces.Solid Hover  · Ocean.75  */
  --surface-brand:        var(--brand-500);         /* Surfaces.Brand        · Brand.500 */
  --surface-brand-hover:  var(--brand-600);         /* Surfaces.Brand Hover  · Brand.600 */
  --surface-brand-tint:   var(--t-brand-5);         /* subtle brand wash (non-Figma helper) */
  /* Blur surface — translucent fill, paired with --surface-blur-filter.
   * Use over imagery / gradients only; over flat colour prefer surface-subtle. */
  --surface-blur:        rgba(255, 255, 255, 0.55);
  --surface-blur-filter: var(--blur-md); /* @kind other */

  /* Fill — the single family for TEXT, ICONS and solid fills.
   * base = primary · subtle = secondary · invert = on-dark · brand · highlight.
   * (There is intentionally no separate "text" scale — text & icons use these.) */
  --fill-base:         var(--slate-900);  /* Text.Base         · Slate.900 */
  --fill-base-hover:   var(--slate-800);  /* Text.Base Hover   · Slate.800 */
  --fill-subtle:       var(--slate-600);  /* Text.Subtle       · Slate.600 */
  --fill-subtle-hover: var(--slate-700);  /* Text.Subtle Hover · Slate.700 */
  --text-neutral:      var(--slate-600);  /* Text.Neutral      · #566780 (fixed) */
  --fill-invert:       var(--slate-50);   /* Text.Base Invert  · Slate.50  */
  --fill-invert-hover: var(--white);      /* Text.Base Invert Hover · White */
  --fill-brand:        var(--brand-500);  /* Text.Brand        · Brand.500 */
  --fill-brand-subtle: var(--brand-400);  /* Text.Brand Subtle · Brand.400 */
  --fill-on-brand:     var(--white);      /* Text.OnBrand      · White     */
  --fill-disabled:     var(--slate-300);  /* Text.Disabled     · Slate.300 */
  --fill-highlight:    var(--brand-500);  /* emphasised words (= Text.Brand) */
  /* surface-oriented fills (tints + solid) */
  --fill-brand-base:      var(--brand-500);
  --fill-blue-trans:      var(--t-blue-hi-10);
  --fill-purple-trans:    var(--t-purple-10);
  /* legacy fill aliases */
  --fill-default-base:    var(--fill-base);
  --fill-default-subtle:  var(--slate-700);
  --fill-default-invert:  var(--fill-invert);

  /* Text — DEPRECATED. Kept so older pages resolve; both map onto Fill. */
  --text-base:        var(--fill-base);
  --text-subtle:      var(--fill-subtle);
  --text-base-invert: var(--fill-invert);
  --text-highlight:   var(--fill-highlight);
  --text-on-brand:    var(--fill-invert);

  /* Borders. NOTE: Figma defines Border.Base/Subtle as WHITE (60/40) — for use
   * on dark/glass surfaces. The dark hairlines used on light grounds are
   * Figma's Border.*Invert (Slate). This build points light-ground borders at
   * the values below (kept visible); switch to --border-*-invert to go glass. */
  --border-base:    var(--t-white-60);   /* Border.Base   · White 60 (lighter than surface) */
  --border-subtle:  var(--t-white-40);   /* Border.Subtle · White 40 */
  --border-strong:  rgba(21, 31, 46, 0.20);
  --border-base-invert:   rgba(27, 32, 39, 0.20); /* Border.Base Invert   · Slate 20 (dark edge, opt-in) */
  --border-subtle-invert: rgba(27, 32, 39, 0.10); /* Border.Subtle Invert · Slate 10 */
  /* Figma Border.Base / Subtle (glass, for dark grounds) */
  --border-onbrand:        var(--t-white-10);
  --border-onbrand-subtle: var(--t-white-5);

  /* Primary action */
  --primary:        var(--ocean-900);
  --primary-blue:   var(--brand-500);
  --primary-blue-hover: var(--brand-600);

  color-scheme: light;
}

/* A light island nested inside a dark page needs the scoped selectors above,
 * so keep [data-theme="light"] / .theme-light listed with :root. */

/* =================================================================
 *      SEMANTIC LAYER  —  DARK  (opt-in)
 * ================================================================= */
:root[data-theme="dark"],
[data-theme="dark"],
[data-ground="navy"],
[data-ground="dark"],
.phero,
.theme-dark,
.dark {
  --background-base:   var(--ocean-900);   /* Background.Base  · Ocean.900 */
  --background-down1:  var(--ocean-950);   /* Background.Down1 · Ocean.950 */
  --background-up1:    var(--ocean-800);   /* Background.Up1   · Ocean.800 */
  --background-up2:    var(--ocean-700);   /* Background.Up2   · Ocean.700 */

  --surface-base:         var(--t-white-10);      /* Surfaces.Base         · White 10 */
  --surface-base-hover:   var(--t-white-15);      /* Surfaces.Base Hover   · White 15 */
  --surface-base-invert:  var(--t-white-80);      /* Surfaces.Base Invert  · White 80 */
  --surface-subtle:       var(--t-white-5);       /* Surfaces.Subtle       · White 5  */
  --surface-subtle-hover: var(--t-white-10);      /* Surfaces.Subtle Hover · White 10 */
  --card-hover-fill:      var(--t-white-15);       /* card :hover — subtle lift on dark, not white */
  --surface-solid:        var(--slate-900);       /* Surfaces.Solid        · Slate.900 */
  --surface-solid-hover:  var(--ocean-900);       /* Surfaces.Solid Hover  · Ocean.900 */
  --surface-brand:        var(--brand-500);       /* Surfaces.Brand        · Brand.500 */
  --surface-brand-hover:  var(--brand-400);       /* Surfaces.Brand Hover  · Brand.400 */
  --surface-brand-tint:   var(--t-brand-10);      /* subtle brand wash (non-Figma helper) */
  --surface-blur:        rgba(255, 255, 255, 0.10);
  --surface-blur-filter: var(--blur-md); /* @kind other */

  /* Fill — text / icons / fills (dark theme) */
  --fill-base:         var(--slate-50);   /* Text.Base         · Slate.50  */
  --fill-base-hover:   var(--white);      /* Text.Base Hover   · White     */
  --fill-subtle:       var(--slate-300);  /* Text.Subtle       · Slate.300 */
  --fill-subtle-hover: var(--slate-200);  /* Text.Subtle Hover · Slate.200 */
  --fill-invert:       var(--slate-900);  /* Text.Base Invert  · Slate.900 */
  --fill-invert-hover: var(--slate-800);  /* Text.Base Invert Hover · Slate.800 */
  --fill-brand:        var(--brand-300);  /* Text.Brand        · Brand.300 */
  --fill-brand-subtle: var(--brand-200);  /* Text.Brand Subtle · Brand.200 */
  --fill-on-brand:     var(--white);      /* Text.OnBrand      · White     */
  --fill-disabled:     var(--slate-600);  /* Text.Disabled     · Slate.600 */
  --fill-highlight: rgb(120, 173, 252);
  --fill-brand-base:      var(--brand-300);
  --fill-blue-trans:      var(--t-blue-hi-12);
  --fill-purple-trans:    var(--t-purple-10);
  --fill-default-base:    var(--fill-base);
  --fill-default-subtle:  var(--slate-200);
  --fill-default-invert:  var(--fill-invert);

  --text-base:        var(--fill-base);
  --text-subtle:      var(--fill-subtle);
  --text-base-invert: var(--fill-invert);
  --text-highlight:   var(--fill-highlight);
  --text-on-brand:    var(--fill-invert);

  --border-base:    var(--t-white-10);   /* Border.Base   · White 10 */
  --border-subtle:  var(--t-white-5);    /* Border.Subtle · White 5  */
  --border-strong:  var(--t-white-20);
  --border-base-invert:    var(--t-white-10);  /* Border.Base Invert   · White 10 */
  --border-subtle-invert:  var(--t-white-5);   /* Border.Subtle Invert · White 5  */
  --border-onbrand:        var(--t-white-10);
  --border-onbrand-subtle: var(--t-white-5);

  --primary:        var(--white);
  --primary-blue:   var(--brand-500);
  --primary-blue-hover: var(--brand-400);

  color-scheme: dark;
}

/* =================================================================
 * 4 · COMPATIBILITY ALIASES
 * Legacy names kept so existing pages keep working. New work should
 * use the semantic / primitive names above. Values held stable to
 * avoid unintended visual shifts across the ~25 marketing pages.
 * ================================================================= */
:root {
  /* Brand / accents */
  --floww-blue:        var(--brand-500);
  --floww-blue-deep:   rgb(0, 48, 245);
  --floww-blue-hi:     rgb(120, 173, 252);
  --floww-purple:      var(--purple-900);
  --floww-purple-lt:   var(--purple-light);
  --floww-purple-deep: rgb(151, 71, 255);
  --floww-amber:       var(--amber-500);

  /* Navy ramp (legacy) → re-pointed onto the OCEAN curve, luminance-preserving.
   * Each stop keeps the lightness it had so text contrast is unchanged; only the
   * hue shifts to ocean's cooler steel-blue. Exact ocean stops use var(); the
   * in-between stops are ocean-hued interpolations. */
  --navy-950: var(--ocean-950);          /* 11,17,25 */
  --navy-900: var(--ocean-900);          /* 21,31,46 */
  --navy-850: rgb(24, 36, 55);
  --navy-800: rgb(28, 42, 64);
  --navy-750: rgb(31, 48, 73);           /* legacy canonical dark, now ocean-toned */
  --navy-700: rgb(35, 55, 84);
  --navy-650: rgb(40, 62, 96);
  --navy-600: rgb(45, 70, 108);
  --navy-500: rgb(50, 77, 119);
  --navy-400: rgb(71, 105, 158);
  --navy-300: var(--ocean-500);          /* 95,130,183 */
  --navy-250: rgb(126, 154, 194);
  --navy-200: rgb(140, 164, 200);
  --navy-150: rgb(157, 178, 208);
  --navy-100: rgb(181, 197, 219);

  /* Light ramp (legacy) */
  --light-50:  rgb(255, 255, 255);
  --light-100: rgb(248, 249, 251);
  --light-200: rgb(240, 242, 246);
  --light-300: rgb(233, 236, 242);
  --light-400: rgb(225, 229, 237);
  --light-500: rgb(218, 222, 233);
  --light-600: rgb(210, 216, 228);
  --light-700: rgb(203, 209, 224);
  --light-800: rgb(195, 203, 219);
  --light-900: rgb(188, 196, 215);

  /* Page surfaces (legacy) → ocean-toned */
  --bg-page:       var(--ocean-75);
  --bg-surface:    var(--white);
  --bg-subtle:     var(--ocean-100);
  --border-default: rgba(188, 196, 215, 0.5);
  --border-subtle-2: rgba(218, 222, 233, 0.15);

  /* Text (legacy names) */
  --text-primary:        var(--ocean-900);
  --text-secondary:      rgb(103, 120, 142);
  --text-on-dark:        rgb(255, 255, 255);
  --text-on-dark-subtle: rgb(169, 177, 196);

  /* Legacy display scale (kept literal so heroes don't reflow) */
  --t-display-xxl: 96px/88px var(--font-display); /* @kind font */
  --t-display-xl: 75px/80px var(--font-display); /* @kind font */
  --t-display-lg: 50px/56px var(--font-display); /* @kind font */
  --t-display-md: 40px/44px var(--font-display); /* @kind font */
  --t-display-sm: 32px/36px var(--font-display); /* @kind font */
  --t-body-xs: 12px/16px var(--font-sans); /* @kind font */

  /* Radius alias used by older pages */
  --radius-lg: var(--r-xl);
}

/* =================================================================
 * 4b · COMPONENT TOKENS  (from the Figma component-variable boards)
 * Control sizing is a *mode*, not a one-off: set `data-size="xs|sm|md|lg"`
 * on a control (or any ancestor) and height/gap follow. Layout padding
 * follows `data-mode="tablet|desktop"`. Button type steps down on mobile.
 * ================================================================= */
:root {
  /* Inputs & controls — md is the default */
  --input-height: 48px; /* @kind spacing */
  --input-gap: 8px; /* @kind spacing */
  --input-h-gap: 16px; /* @kind spacing */

  /* Buttons — desktop ceiling; mobile floor applied below */
  --size-button: 16px; /* @kind font */
  --lineheight-button: 20px; /* @kind font */

  /* Layout padding scale (desktop default) */
  --padding-3xs: 4px; /* @kind spacing */
  --padding-xs: 12px; /* @kind spacing */
  --padding-base: 24px; /* @kind spacing */

  /* Dialog / modal */
  --dialog-gap-v: 40px; /* @kind spacing */

  /* Glass blur + validity accent */
  --bg-blur: 40px; /* @kind other */
  --component-valid: rgb(172, 210, 197); /* @kind color */
}

/* Control sizing modes. Height, internal gaps AND label size step together,
 * so a control set to a size mode is fully consistent. */
[data-size="xs"] { --input-height: 32px; --input-gap: 4px;  --input-h-gap: 4px;  --size-button: 13px; --lineheight-button: 18px; }
[data-size="sm"] { --input-height: 40px; --input-gap: 6px;  --input-h-gap: 6px;  --size-button: 14px; --lineheight-button: 20px; }
[data-size="md"] { --input-height: 48px; --input-gap: 8px;  --input-h-gap: 16px; --size-button: 16px; --lineheight-button: 20px; }
[data-size="lg"] { --input-height: 56px; --input-gap: 12px; --input-h-gap: 12px; --size-button: 17px; --lineheight-button: 22px; }

[data-mode="tablet"] { --padding-3xs: 2px; --padding-xs: 8px;  --padding-base: 16px; }
[data-mode="desktop"] { --padding-3xs: 4px; --padding-xs: 12px; --padding-base: 24px; }
[data-size="sm"] { --dialog-gap-v: 16px; }

/* Mobile: button type steps 16/20 → 14/18 */
@media (max-width: 640px) {
  :root { --size-button: 14px; --lineheight-button: 18px; }
}

/* Broker sub-brand mode — warmer transparency over the same structure */
[data-mode="broker"] {
  --fill-transparency: rgba(133, 113, 133, 0.3);
  --border-strong: rgba(255, 255, 255, 0.20);
}

/* =================================================================
 * 5 · RESET + UTILITIES
 * ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fill-base);
  background: var(--background-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary-blue); text-decoration: none; }
img, svg { display: block; }

/* --- Eyebrow / display helpers --------------------------------- */
.eyebrow {
  font: var(--t-eyebrow);
  color: var(--primary-blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); }
.display-tight { letter-spacing: var(--tracking-display-tight); }

/* Type recipe classes (use these instead of raw font on a page) */
.h1 { font: var(--t-h1); letter-spacing: var(--tracking-display-tight); margin: 0; }
.h2 { font: var(--t-h2); letter-spacing: var(--tracking-display); margin: 0; }
.h3 { font: var(--t-h3); letter-spacing: var(--tracking-display); margin: 0; }
.h4 { font: var(--t-h4); letter-spacing: var(--tracking-display); margin: 0; }
.h5 { font: var(--t-h5); letter-spacing: -0.01em; margin: 0; }
.h6 { font: var(--t-h6); margin: 0; }
.body-lg { font: var(--t-body-lg); }
.body-md { font: var(--t-body-md); }
.body-sm { font: var(--t-body-sm); }
.label   { font: 500 var(--fs-body-sm)/var(--lh-body-sm) var(--font-sans); }

/* --- Buttons ---------------------------------------------------- *
 * Pill, Inter Medium. Type and height come from the Figma component
 * variables: --size-button / --lineheight-button (16/20 desktop → 14/18
 * mobile) and the shared control-height scale (32/40/48/56). Set
 * data-size="xs|sm|md|lg" to change height — don't hardcode padding.
 * One blue primary per view. The 2026 white-on-dark variants live in
 * the dark/glass section below. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--input-height);
  padding-inline: var(--padding-base);
  font: 500 var(--size-button)/var(--lineheight-button) var(--font-sans);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }

/* Primary rides the Fill family, so it inverts with the theme:
 * light → dark (ocean) fill + white label; dark → white fill + ocean label.
 * (No blue — blue is reserved for text links only.) */
.btn-primary, .btn--primary, .btn-dark, .btn--dark { background: var(--fill-base); color: var(--fill-invert); border-color: transparent; }
.btn-primary:hover, .btn--primary:hover, .btn-dark:hover, .btn--dark:hover { background: var(--fill-default-subtle); }

/* Secondary — outline. Rides the Fill family: dark text + dark hairline on
 * light grounds, white on dark ones. */
/* Outline button: stroke tracks the text (base ink on light, white on dark),
 * not the glass --border-base which reads white on light surfaces. */
.btn-secondary, .btn--secondary { background: transparent; color: var(--fill-base); border-color: var(--fill-base); }
.btn-secondary:hover, .btn--secondary:hover { background: var(--surface-subtle); border-color: var(--fill-base); }

/* Ghost — plain text, no fill or border. */
.btn-ghost, .btn--ghost { background: transparent; color: var(--fill-base); }
.btn-ghost:hover, .btn--ghost:hover { background: var(--surface-subtle); }

/* Link — the only blue button: brand-blue text, no fill or border. */
.btn-link, .btn--link { background: transparent; color: var(--fill-brand); border-color: transparent; padding-inline: var(--padding-xs); }
.btn-link:hover, .btn--link:hover { color: var(--primary-blue-hover); }

/* Size modifiers map onto the Figma control-height scale. Equivalent to
 * setting data-size on the button (or an ancestor). */
.btn-xs { --input-height: 32px; padding-inline: var(--padding-xs); font-size: 14px; line-height: 18px; }
.btn-sm { --input-height: 40px; padding-inline: var(--padding-xs); font-size: 14px; line-height: 18px; }
.btn-md { --input-height: 48px; }
.btn-lg { --input-height: 56px; padding-inline: var(--space-8); }
.btn-icon { padding-inline: 0; width: var(--input-height); }

/* --- Chips / tags ---------------------------------------------- *
 * Tonal pills. Default neutral; tonal + state variants are theme-aware
 * where they use semantic tokens. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font: 500 12px/16px var(--font-sans);
  border-radius: var(--r-xs);
  background: var(--surface-subtle); color: var(--fill-base);
  border: 1px solid var(--border-subtle);
}
.chip-blue   { background: var(--t-brand-10);  color: var(--brand-500);  border-color: transparent; }
.chip-purple { background: var(--t-purple-10);  color: var(--purple-900); border-color: transparent; }
.chip-amber  { background: rgba(250,190,40,0.18); color: rgb(140,100,0);  border-color: transparent; }
.chip-dark   { background: var(--ocean-900);    color: #fff;             border-color: transparent; }
.chip-success { background: var(--success-100); color: var(--success-900); border-color: transparent; }
.chip-danger  { background: var(--danger-100);  color: var(--danger-900);  border-color: transparent; }
.chip-info    { background: var(--info-100);    color: var(--info-900);    border-color: transparent; }
.chip-warning { background: var(--warning-100); color: var(--warning-900); border-color: transparent; }
.chip-sm { padding: 2px 8px; font-size: 11px; }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Card ------------------------------------------------------- */
.card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
/* Blur surface utility — the token pair applied together. */
.surface-blur {
  background: var(--surface-blur);
  backdrop-filter: var(--surface-blur-filter);
  -webkit-backdrop-filter: var(--surface-blur-filter);
  border: 1px solid var(--border-subtle-invert);
  border-radius: var(--r-xl);
}

/* --- Bounded content ------------------------------------------- */
.container { width: min(var(--container-default), 100% - 48px); margin-inline: auto; }
.container-narrow { width: min(var(--container-editorial), 100% - 48px); margin-inline: auto; }

/* =================================================================
 * 2026 Dark / Glass surface primitives
 *
 * The 2026 marketing direction lives on a deep navy ground (#0C0D1B)
 * with translucent white surfaces + backdrop blur. These compose with
 * the semantic dark theme above.
 * ================================================================= */
:root {
  --dark-ground:    rgb(12, 13, 27);
  --dark-ground-2:  rgb(20, 22, 44);
  --dark-band:      rgb(239, 242, 246);
  --dark-hero-from: rgb(57, 71, 91);
  --dark-hero-to:   rgb(31, 40, 69);

  --glass-fill:        rgba(255, 255, 255, 0.07);
  --glass-fill-2:      rgba(255, 255, 255, 0.12);
  --glass-fill-strong: rgba(255, 255, 255, 0.20);
  --glass-stroke:      rgba(255, 255, 255, 0.10);
  --glass-stroke-2:    rgba(255, 255, 255, 0.20);
  --glass-blur: blur(40px); /* @kind other */

  --text-dark-primary:   rgb(255, 255, 255);
  --text-dark-secondary: rgb(179, 180, 192);
  --text-dark-muted:     rgb(159, 172, 189);
  --text-dark-faint:     rgb(123, 132, 156);
}

.surface-hero-2026 {
  background: linear-gradient(180deg, var(--dark-hero-from) 0%, var(--dark-hero-to) 100%);
  color: var(--text-dark-primary);
}

.glass {
  background: var(--glass-fill);
  border: 0.5px solid var(--glass-stroke);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.glass-strong {
  background: var(--glass-fill-2);
  border: 0.5px solid var(--glass-stroke-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.nav-glass-2026 {
  border-radius: 999px;
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)),
    linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
  border: 0.5px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.eyebrow-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--glass-fill);
  font: 500 14px/20px var(--font-sans);
  color: var(--text-dark-primary);
}
.eyebrow-chip svg { width: 16px; height: 16px; }

/* Buttons — 2026 white-on-dark variants.
 * .btn-light is the PRIMARY action on dark grounds. */
.btn-light {
  background: #fff; color: var(--navy-850);
  border-radius: var(--r-pill);
  height: var(--input-height); padding-inline: 20px;
  font: 500 var(--size-button)/var(--lineheight-button) var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px solid #fff; cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.btn-light:hover { background: rgba(255,255,255,0.9); }
.btn-outline-light {
  background: transparent; color: #fff;
  border-radius: var(--r-pill);
  height: var(--input-height); padding-inline: 20px;
  font: 500 var(--size-button)/var(--lineheight-button) var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px solid rgba(255,255,255,0.7); cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.btn-link-light {
  background: transparent; color: #fff;
  font: 500 14px/20px var(--font-sans);
  padding: 4px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer;
}
.btn-link-light:hover { color: var(--floww-blue-hi); }

/* Card — translucent / dark variants */
.card-glass {
  background: var(--glass-fill);
  border: 0.5px solid var(--glass-stroke);
  border-radius: var(--r-md);
  color: var(--text-dark-primary);
}
.card-glass-lg {
  background: var(--glass-fill);
  border: 0.5px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  color: var(--text-dark-primary);
  overflow: hidden;
}
.card-solid-dark {
  background: var(--navy-700);
  border: 0.5px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  color: var(--text-dark-primary);
  overflow: hidden;
}

/* Trust strip credential block */
.trust-credential {
  display: flex; flex-direction: column; gap: 7px;
  color: var(--text-dark-primary);
}
.trust-credential__tag {
  align-self: flex-start;
  background: #fff; color: var(--navy-850);
  font: 500 12px/16px var(--font-sans);
  padding: 2px 6px; border-radius: 2px;
}
.trust-credential__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 24px; letter-spacing: -0.01em;
}
.trust-credential__sub {
  font: 500 14px/20px var(--font-sans);
  color: var(--navy-200);
}

/* Eyebrow on dark — uppercase blue accent */
.eyebrow-on-dark {
  font: 500 12px/16px var(--font-sans);
  color: var(--floww-blue-hi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Display tints used on the dark sections */
.display-on-dark { color: var(--text-dark-primary); }
.body-on-dark    { color: var(--text-dark-secondary); }
.body-on-dark-muted { color: var(--text-dark-muted); }

/* Form input — translucent on dark */
.input-glass {
  width: 100%; height: 48px;
  padding: 12px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-xs);
  font: 400 14px/24px var(--font-sans);
  color: var(--navy-900);
}
.input-glass::placeholder { color: var(--navy-400); }
.input-glass:focus {
  outline: none; background: #fff;
  border-color: var(--floww-blue);
}
.input-label-on-dark {
  font: 500 14px/21px var(--font-sans);
  color: rgba(255,255,255,0.7);
  display: block; margin-bottom: 8px;
}