/**
 * Holistics Design System - Core Tokens (Colors + Type)
 *
 * Two design systems share a base palette but differ in CTA + density:
 *   - In-App UI:   Blue-600 primary, compact (13-16px), data-dense
 *   - Landing/Marketing: Green-600 primary, large (16-48px), Blue-900 dominant
 *
 * Source: holistics-ds/configs/tailwind.tokens.mjs
 *         holistics-ds/landing-page/tokens/variables.css
 */

/* ========================================
   FONT FACES - self-hosted (uploaded .ttf files in fonts/)
   ======================================== */
@font-face {
  font-family: "InterVariable";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     BASE PALETTE (shared, identical to Tailwind tokens)
     ============================================================ */

  /* Blue - In-app primary + links */
  --blue-50:  #E8F2FD;
  --blue-100: #D1E5FA;
  --blue-200: #BBD7F7;
  --blue-300: #8DBEF2;
  --blue-400: #5EA3ED;
  --blue-500: #4896EA;
  --blue-600: #1B7CE4;  /* In-app primary CTA */
  --blue-700: #1663B6;
  --blue-800: #104A89;
  --blue-900: #05264C;  /* Dominant dark bg + wordmark */

  /* Green - Marketing primary CTA + accents */
  --green-50:  #EAF8F2;
  --green-100: #CCEDE0;
  --green-200: #A4E0C8;
  --green-300: #7AD1AE;
  --green-400: #52C396;
  --green-500: #2CB67F;  /* Logomark green ONLY */
  --green-600: #259B6C;  /* Marketing CTA + property accents */
  --green-700: #1F815A;
  --green-800: #196848;
  --green-900: #145239;

  /* Purple - secondary/ad-hoc */
  --purple-50:  #F4EEFD;
  --purple-100: #E9DCFA;
  --purple-200: #DECBF7;
  --purple-300: #D0B5F4;
  --purple-400: #B184EC;
  --purple-500: #A46DE9;
  --purple-600: #9250E5;
  --purple-700: #7C2CE0;
  --purple-800: #5F1BB4;
  --purple-900: #38097A;

  /* Gray - light mode */
  --gray-50:  #F9FBFC;
  --gray-100: #F5F8FA;
  --gray-200: #EDF1F5;
  --gray-300: #E3E7ED;
  --gray-400: #CBD0D7;
  --gray-500: #989CA6;
  --gray-600: #727685;
  --gray-700: #505157;
  --gray-800: #212327;
  --gray-900: #13151A;

  /* Red / Orange (semantic) */
  --red-50:  #FFF5F5; --red-100: #FDE8E8; --red-200: #FAD2D1; --red-300: #F6A5A2;
  --red-400: #F17874; --red-500: #EC4C46; --red-600: #E71F18;
  --red-700: #D01C16; --red-800: #BF0E08; --red-900: #8B120E;

  --orange-50:  #FFF7EA; --orange-100: #FFF4D8; --orange-200: #FFE7AF; --orange-300: #FECF7F;
  --orange-400: #FAAC2E; --orange-500: #F28100; --orange-600: #E36A01;
  --orange-700: #B04A00; --orange-800: #913D00; --orange-900: #662900;

  /* Gray on dark - for type on blue-900 surfaces */
  --gray-on-dark-50:  #13151A;
  --gray-on-dark-75:  #191B1F;
  --gray-on-dark-100: #212327;
  --gray-on-dark-200: #292B2E;
  --gray-on-dark-300: #2E3033;
  --gray-on-dark-400: #424347;
  --gray-on-dark-500: #505157;
  --gray-on-dark-600: #666970;
  --gray-on-dark-700: #AFB4BF;
  --gray-on-dark-800: #D2D4D9;
  --gray-on-dark-900: #E8EAED;

  --white-alpha-10: rgba(255,255,255,0.10);
  --white-alpha-15: rgba(255,255,255,0.15);
  --white-alpha-20: rgba(255,255,255,0.20);

  /* ============================================================
     SEMANTIC COLOR TOKENS - In-app UI, Light mode

     Mirrors holistics-ds/configs/tailwind.tokens.mjs. Organized by
     category, then by family (neutral · highlight · success · danger
     · warning · adhoc · inverted), then by state (default/hover/
     active/disabled + secondary/strong/weak/button/helper).

     NAMING CONVENTION - always use the canonical form
     ──────────────────────────────────────────────────
     Default family (no prefix):   {property}-{state}
         text-default, bg-hover, border-default, icon-weak
     Named semantics:              {property}-{semantic}-{state}
         text-highlight-default, bg-danger-hover, icon-success-disabled
     Interactive backgrounds:      bg-interactive-{semantic}-{state}
         bg-interactive-highlight-default, bg-interactive-default

     The `-default` suffix is REQUIRED for the rest state of any named
     semantic (text-highlight-default, bg-success-default). Do not
     drop it; tokens like `text-highlight` or `bg-success` are legacy
     aliases kept for migration, not for new code.

     Families map to palette roles:
       · highlight → Blue   (primary, links, selection)
       · success   → Green  (positive, approve, save)
       · danger    → Red    (destructive, errors)
       · warning   → Orange (caution, pending)
       · adhoc     → Purple (ad-hoc / one-off exploration)

     Use these tokens, never raw palette scales, in product UI so
     we can later ship dark mode / theming without rewrites.

     FORBIDDEN: raw palette classes in product code
         ❌ text-gray-700, bg-blue-600, border-red-300
         ✅ text-default, bg-highlight-default, border-danger-default
     Only `white`, `black`, `transparent` may be used raw.
     ============================================================ */

  /* ---------------------------------------- TEXT (fg-*) */
  /* Neutral */
  --fg-default:        var(--gray-800);
  --fg-strong:         var(--gray-900);
  --fg-weak:           var(--gray-700);
  --fg-helper:         var(--gray-600);
  --fg-disabled:       var(--gray-500);
  --fg-placeholder:    var(--gray-600);
  --fg-white:          #FFFFFF;

  /* Highlight (Blue) */
  --fg-highlight-default:  var(--blue-800);
  --fg-highlight-strong:   var(--blue-900);
  --fg-highlight-weak:     var(--blue-700);
  --fg-highlight-button:   var(--blue-600);
  --fg-highlight-disabled: var(--blue-300);
  --fg-highlight:          var(--fg-highlight-default); /* legacy alias */

  /* Success (Green) */
  --fg-success-default:  var(--green-800);
  --fg-success-strong:   var(--green-900);
  --fg-success-weak:     var(--green-700);
  --fg-success-button:   var(--green-600);
  --fg-success-disabled: var(--green-300);
  --fg-success:          var(--fg-success-default); /* legacy alias */

  /* Danger (Red) */
  --fg-danger-default:  var(--red-800);
  --fg-danger-strong:   var(--red-900);
  --fg-danger-weak:     var(--red-700);
  --fg-danger-button:   var(--red-600);
  --fg-danger-disabled: var(--red-300);
  --fg-danger:          var(--fg-danger-default); /* legacy alias */

  /* Warning (Orange) */
  --fg-warning-default:  var(--orange-800);
  --fg-warning-strong:   var(--orange-900);
  --fg-warning-weak:     var(--orange-700);
  --fg-warning-button:   var(--orange-600);
  --fg-warning-disabled: var(--orange-300);
  --fg-warning:          var(--fg-warning-default); /* legacy alias */

  /* Ad-hoc (Purple) */
  --fg-adhoc-default:  var(--purple-800);
  --fg-adhoc-strong:   var(--purple-900);
  --fg-adhoc-weak:     var(--purple-700);
  --fg-adhoc-button:   var(--purple-600);
  --fg-adhoc-disabled: var(--purple-300);
  --fg-adhoc:          var(--fg-adhoc-default); /* legacy alias */

  /* Link / text-link (canonical: text-link-*) */
  --text-link-default: var(--blue-600);
  --text-link-hover:   var(--blue-700);
  --text-link-active:  var(--blue-800);
  /* Legacy aliases - prefer text-link-* above */
  --link-default: var(--text-link-default);
  --link-hover:   var(--text-link-hover);
  --link-active:  var(--text-link-active);

  /* Inverted text - sits on dark surfaces (inverted-default bg etc) */
  --fg-inverted-default:     var(--gray-on-dark-800);
  --fg-inverted-strong:      var(--gray-on-dark-900);
  --fg-inverted-weak:        var(--gray-on-dark-700);
  --fg-inverted-helper:      var(--gray-on-dark-600);
  --fg-inverted-placeholder: var(--gray-on-dark-600);
  --fg-inverted-disabled:    var(--gray-on-dark-500);
  --text-link-inverted-default: #6EB1F5;
  --text-link-inverted-hover:   #94C6F7;
  --text-link-inverted-active:  #A7D2FC;
  /* Legacy aliases */
  --link-inverted-default:   var(--text-link-inverted-default);
  --link-inverted-hover:     var(--text-link-inverted-hover);
  --link-inverted-active:    var(--text-link-inverted-active);

  /* ---------------------------------------- BACKGROUND (bg-*) */
  /* Neutral surfaces (canonical names use -default for rest state) */
  --bg-default:           #FFFFFF;
  --bg-hover:             var(--gray-100);
  --bg-active:            var(--gray-200);
  --bg-disabled:          var(--gray-200);
  --bg-secondary-default: var(--gray-50);
  --bg-secondary-hover:   var(--gray-200);
  --bg-secondary-active:  var(--gray-200);
  --bg-base-default:      var(--gray-100);   /* canvas behind cards */
  /* Legacy aliases - prefer bg-base-default / bg-secondary-default */
  --bg-secondary:         var(--bg-secondary-default);
  --bg-base:              var(--bg-base-default);

  /* Interactive - neutral clickable surfaces (chips, toggles, scrollbars) */
  --bg-interactive-default:  var(--gray-200);
  --bg-interactive-hover:    var(--gray-300);
  --bg-interactive-active:   var(--gray-400);
  --bg-interactive-switch:   var(--gray-400);   /* switch OFF track */
  --bg-interactive-inverted: var(--gray-800);   /* switch ON / dark chip */
  --bg-interactive-scrollbar:var(--gray-300);
  --bg-interactive-overlay:  rgba(0,0,0,0.40);  /* modal scrim */
  /* Legacy alias */
  --bg-interactive:          var(--bg-interactive-default);

  /* Interactive highlight (Blue) - row selection, hover states on list items */
  --bg-interactive-highlight-default: var(--blue-100);
  --bg-interactive-highlight-hover:   var(--blue-200);
  --bg-interactive-highlight-active:  var(--blue-300);
  /* Legacy alias */
  --bg-interactive-highlight:         var(--bg-interactive-highlight-default);

  /* Interactive status - subtle fills for status-tinted interactive rows */
  --bg-interactive-danger:         var(--red-100);
  --bg-interactive-danger-hover:   var(--red-200);
  --bg-interactive-danger-active:  var(--red-300);
  --bg-interactive-warning:        var(--orange-100);
  --bg-interactive-warning-hover:  var(--orange-200);
  --bg-interactive-warning-active: var(--orange-300);
  --bg-interactive-success:        var(--green-100);
  --bg-interactive-success-hover:  var(--green-200);
  --bg-interactive-success-active: var(--green-300);
  --bg-interactive-adhoc:          var(--purple-100);
  --bg-interactive-adhoc-hover:    var(--purple-200);
  --bg-interactive-adhoc-active:   var(--purple-300);

  /* Highlight (Blue) - primary button, active tab, filled selection */
  --bg-highlight-default:           var(--blue-600);
  --bg-highlight-hover:             var(--blue-700);
  --bg-highlight-active:            var(--blue-800);
  --bg-highlight-disabled:          var(--blue-200);
  --bg-highlight-secondary-default: var(--blue-50);
  --bg-highlight-secondary-hover:   var(--blue-100);
  --bg-highlight-secondary-active:  var(--blue-200);
  /* Legacy aliases */
  --bg-highlight:                   var(--bg-highlight-default);
  --bg-highlight-secondary:         var(--bg-highlight-secondary-default);

  /* Success (Green) */
  --bg-success-default:           var(--green-600);
  --bg-success-hover:             var(--green-700);
  --bg-success-active:            var(--green-800);
  --bg-success-disabled:          var(--green-200);
  --bg-success-secondary-default: var(--green-50);
  --bg-success-secondary-hover:   var(--green-100);
  --bg-success-secondary-active:  var(--green-200);
  --bg-success:                   var(--bg-success-default);
  --bg-success-secondary:         var(--bg-success-secondary-default);

  /* Danger (Red) */
  --bg-danger-default:           var(--red-600);
  --bg-danger-hover:             var(--red-700);
  --bg-danger-active:            var(--red-800);
  --bg-danger-disabled:          var(--red-200);
  --bg-danger-secondary-default: var(--red-50);
  --bg-danger-secondary-hover:   var(--red-100);
  --bg-danger-secondary-active:  var(--red-200);
  --bg-danger:                   var(--bg-danger-default);
  --bg-danger-secondary:         var(--bg-danger-secondary-default);

  /* Warning (Orange) */
  --bg-warning-default:           var(--orange-600);
  --bg-warning-hover:             var(--orange-700);
  --bg-warning-active:            var(--orange-800);
  --bg-warning-disabled:          var(--orange-200);
  --bg-warning-secondary-default: var(--orange-50);
  --bg-warning-secondary-hover:   var(--orange-100);
  --bg-warning-secondary-active:  var(--orange-200);
  --bg-warning:                   var(--bg-warning-default);
  --bg-warning-secondary:         var(--bg-warning-secondary-default);

  /* Ad-hoc (Purple) */
  --bg-adhoc-default:           var(--purple-600);
  --bg-adhoc-hover:             var(--purple-700);
  --bg-adhoc-active:            var(--purple-800);
  --bg-adhoc-disabled:          var(--purple-200);
  --bg-adhoc-secondary-default: var(--purple-50);
  --bg-adhoc-secondary-hover:   var(--purple-100);
  --bg-adhoc-secondary-active:  var(--purple-200);
  --bg-adhoc:                   var(--bg-adhoc-default);
  --bg-adhoc-secondary:         var(--bg-adhoc-secondary-default);

  /* Avatar - special case, always brand blue for user pills */
  --bg-avatar-default: var(--blue-900);
  --bg-avatar-counter: var(--blue-200);
  --bg-avatar:         var(--bg-avatar-default);

  /* Inverted - dark chrome inside light app (tooltips, floating toolbars) */
  --bg-inverted-default:           var(--gray-on-dark-75);   /* #191B1F */
  --bg-inverted-hover:             var(--gray-on-dark-100);
  --bg-inverted-active:            var(--gray-on-dark-200);
  --bg-inverted-secondary-default: var(--gray-on-dark-50);
  --bg-inverted-base-default:      var(--gray-on-dark-50);   /* deepest inverted */
  /* Legacy aliases */
  --bg-inverted:                   var(--bg-inverted-default);
  --bg-inverted-secondary:         var(--bg-inverted-secondary-default);
  --bg-inverted-base:              var(--bg-inverted-base-default);

  /* ---------------------------------------- BORDER (border-*) */
  --border-default:            var(--gray-300);
  --border-strong:             var(--gray-400);
  --border-highlight-default:  var(--blue-300);
  --border-highlight-strong:   var(--blue-600);
  --border-success-default:    var(--green-300);
  --border-success-strong:     var(--green-600);
  --border-danger-default:     var(--red-300);
  --border-danger-strong:      var(--red-600);
  --border-warning-default:    var(--orange-300);
  --border-warning-strong:     var(--orange-600);
  --border-adhoc-default:      var(--purple-300);
  --border-adhoc-strong:       var(--purple-600);
  --border-avatar-group:       #FFFFFF;              /* ring around stacked avatars */
  --border-transparent:        transparent;
  --border-inverted-default:   var(--gray-on-dark-300);
  --border-inverted-strong:    var(--gray-on-dark-400);
  /* Legacy aliases */
  --border-highlight:          var(--border-highlight-default);
  --border-success:            var(--border-success-default);
  --border-danger:             var(--border-danger-default);
  --border-warning:            var(--border-warning-default);
  --border-adhoc:              var(--border-adhoc-default);
  --border-inverted:           var(--border-inverted-default);

  /* ---------------------------------------- ICON (icon-*) */
  --icon-default:           var(--gray-700);
  --icon-hover:             var(--gray-800);
  --icon-active:            var(--gray-900);
  --icon-weak:              var(--gray-600);
  --icon-disabled:          var(--gray-500);
  --icon-white:             #FFFFFF;

  --icon-highlight-default:  var(--blue-600);
  --icon-highlight-hover:    var(--blue-700);
  --icon-highlight-active:   var(--blue-800);
  --icon-highlight-disabled: var(--blue-300);

  --icon-success-default:  var(--green-600);
  --icon-success-hover:    var(--green-700);
  --icon-success-active:   var(--green-800);
  --icon-success-disabled: var(--green-300);

  --icon-danger-default:  var(--red-600);
  --icon-danger-hover:    var(--red-700);
  --icon-danger-active:   var(--red-800);
  --icon-danger-disabled: var(--red-300);

  --icon-warning-default:  var(--orange-600);
  --icon-warning-hover:    var(--orange-700);
  --icon-warning-active:   var(--orange-800);
  --icon-warning-disabled: var(--orange-300);

  --icon-adhoc-default:  var(--purple-600);
  --icon-adhoc-hover:    var(--purple-700);
  --icon-adhoc-active:   var(--purple-800);
  --icon-adhoc-disabled: var(--purple-300);

  --icon-inverted-default:  var(--gray-on-dark-700);
  --icon-inverted-hover:    var(--gray-on-dark-800);
  --icon-inverted-active:   var(--gray-on-dark-900);
  --icon-inverted-weak:     var(--gray-on-dark-600);
  --icon-inverted-disabled: var(--gray-on-dark-500);

  /* Legacy aliases */
  --icon-highlight: var(--icon-highlight-default);
  --icon-success:   var(--icon-success-default);
  --icon-danger:    var(--icon-danger-default);
  --icon-warning:   var(--icon-warning-default);
  --icon-adhoc:     var(--icon-adhoc-default);
  --icon-inverted:  var(--icon-inverted-default);

  /* ---------------------------------------- FOCUS RING (ring-*) */
  /* Two-stop focus rings: inner = solid 2px, outer = halo 4px */
  --ring-default-inner:   var(--gray-800);
  --ring-default-outer:   var(--gray-300);
  --ring-highlight-inner: var(--blue-800);
  --ring-highlight-outer: var(--blue-300);
  --ring-success-inner:   var(--green-800);
  --ring-success-outer:   var(--green-300);
  --ring-danger-inner:    var(--red-800);
  --ring-danger-outer:    var(--red-300);
  --ring-warning-inner:   var(--orange-800);
  --ring-warning-outer:   var(--orange-300);

  /* ---------------------------------------- LOGO */
  /* Logomark colors - do not use elsewhere */
  --logo-green:         var(--green-500);
  --logo-green-strong:  var(--green-600);
  --logo-navy:          var(--blue-900);
  --logo-white:         #FFFFFF;

  /* Brand - raw brand references, use only on marketing surfaces */
  --brand-blue-900: #05264C;
  --brand-green-500:#2CB67F;  /* logomark only */
  --brand-green-600:#259B6C;  /* marketing CTAs / property names */

  /* ============================================================
     GRADIENTS
     ============================================================ */
  --linear-blue-hero: radial-gradient(120% 100% at 50% 0%, #1764B8 0%, #041C30 50%);
  --linear-blue-tl-rb: linear-gradient(110deg, #023470 17.76%, #061E3B 71.54%, #031213 118.53%);
  --linear-blue-t-b:  linear-gradient(176deg, #023470 3.48%, #061E3B 80.76%, #031213 232.33%);
  --linear-light-blue-50-t-b: linear-gradient(180deg, #E8F2FD 0%, #FFFFFF 100%);
  --linear-light-blue-50-b-t: linear-gradient(180deg, #FFFFFF 0%, #E8F2FD 100%);
  --linear-light-blue-100-t-b: linear-gradient(180deg, #D1E5FA 0%, #FFFFFF 100%);
  --radial-light-blue: radial-gradient(103% 25% at 50% 0%, #E8F2FD 0%, #FFFFFF 100%);

  /* Dark blue → green mesh (marketing hero, dark section with warmth).
     Source: Mesh Green 04/05 - green-700 base, blue-900 blurred overlay. */
  --mesh-blue-green-br: linear-gradient(135deg, #1F815A 0%, #05264C 70%);
  --mesh-blue-green-bl: linear-gradient(225deg, #1F815A 0%, #05264C 75%);

  /* Light pastel blue → green (soft trust band, pricing/FAQ backgrounds).
     Source: Pastel Mesh 01 - blue-100 to green-100 at 50% opacity over white. */
  --mesh-pastel-blue-green: linear-gradient(135deg, rgba(209,229,250,0.5) 0%, rgba(204,237,224,0.5) 100%), #FFFFFF;
  --linear-pastel-blue-green: linear-gradient(135deg, #D1E5FA 0%, #CCEDE0 100%);

  /* ============================================================
     SHADOWS & RADIUS

     Two separate shadow systems, do not mix:

     · IN-APP shadows (`--shadow-*`) tint from near-black #13151A.
       Used in the product UI: popovers, dropdowns, modals, menus.
       Scale: sm · DEFAULT · md · lg · xl + directional left/top.

     · LANDING shadows (`--shadow-card*`, `--shadow-btn*`) tint from
       brand-blue #05264C with larger, softer falloffs. Used on
       marketing surfaces: hero cards, pricing, CTAs.

     The in-app shadows are neutral/cool so they disappear into chart
     surfaces. The landing shadows are brand-tinted so they feel
     premium against white marketing backgrounds.
     ============================================================ */

  /* --- IN-APP (base: near-black #13151A) --- */
  --shadow-alpha-neutral-5:  rgba(19,21,26,0.05);
  --shadow-alpha-neutral-6:  rgba(19,21,26,0.06);
  --shadow-alpha-neutral-8:  rgba(19,21,26,0.08);
  --shadow-alpha-neutral-12: rgba(19,21,26,0.12);
  --shadow-alpha-neutral-16: rgba(19,21,26,0.16);
  --shadow-alpha-neutral-20: rgba(19,21,26,0.20);

  --shadow-default:
    0px 2px 4px -1px var(--shadow-alpha-neutral-8);
  --shadow-xs:
    0px 1px 2px 0px var(--shadow-alpha-neutral-5);
  --shadow-md:
    0px 8px 16px -4px var(--shadow-alpha-neutral-12),
    0px 2px 4px -1px var(--shadow-alpha-neutral-6),
    0px 1px 2px 0px var(--shadow-alpha-neutral-6);
  --shadow-lg:
    0px 16px 32px -8px var(--shadow-alpha-neutral-16),
    0px 4px 8px -2px rgba(19,21,26,0.04),
    0px 1px 2px -1px rgba(19,21,26,0.04);
  --shadow-xl:
    0px 32px 48px -8px var(--shadow-alpha-neutral-20),
    0px 12px 24px -8px var(--shadow-alpha-neutral-12),
    0px 4px 8px -4px var(--shadow-alpha-neutral-8),
    0px 1px 2px 0px var(--shadow-alpha-neutral-8);
  --shadow-left:
    -16px 0px 32px -8px var(--shadow-alpha-neutral-16),
    -4px 0px 8px -4px rgba(19,21,26,0.04),
    -1px 0px 2px -1px rgba(19,21,26,0.04);
  --shadow-top:
    0px -16px 32px -8px var(--shadow-alpha-neutral-16),
    0px -4px 8px -4px rgba(19,21,26,0.04),
    0px -1px 2px -1px rgba(19,21,26,0.04);

  /* --- LANDING (base: brand blue #05264C) --- */
  --shadow-alpha-6:  rgba(5,38,76,0.06);
  --shadow-alpha-8:  rgba(5,38,76,0.08);
  --shadow-alpha-12: rgba(5,38,76,0.12);
  --shadow-alpha-32: rgba(5,38,76,0.32);
  --shadow-alpha-48: rgba(5,38,76,0.48);

  --shadow-sm:
    0px 0px 0px 1px var(--shadow-alpha-6),
    0px 1px 2px 0px var(--shadow-alpha-8);

  --shadow-card:
    0px 8px 16px -2px var(--shadow-alpha-6),
    0px 4px 8px -1px var(--shadow-alpha-8),
    0px 1px 2px 0px var(--shadow-alpha-8),
    0px 0px 0px 1px var(--shadow-alpha-6);

  --shadow-card-lg:
    0px 32px 64px -20px var(--shadow-alpha-32),
    0px 16px 32px -8px var(--shadow-alpha-12),
    0px 4px 8px -1px var(--shadow-alpha-8),
    0px 1px 2px 0px var(--shadow-alpha-8),
    0px 0px 0px 1px var(--shadow-alpha-6);

  --shadow-card-featured:
    0px 24px 48px -12px #05264C,
    0px 8px 16px -2px var(--shadow-alpha-12),
    0px 4px 8px -1px var(--shadow-alpha-8),
    0px 1px 2px 0px var(--shadow-alpha-8);

  --shadow-guidebook:
    0px 20px 40px -8px var(--shadow-alpha-48),
    0px 8px 16px -2px var(--shadow-alpha-12),
    0px 4px 8px -1px var(--shadow-alpha-8),
    0px 1px 2px 0px var(--shadow-alpha-8);

  --shadow-btn:
    0px 0px 0px 1px var(--shadow-alpha-8),
    0px 1px 2px 0px var(--shadow-alpha-12),
    inset 0px 1px 0px #FFFFFF;
  --shadow-btn-primary:
    0px 0px 0px 1px #1F815A,
    0px 1px 2px 0px rgba(25,104,72,0.32),
    inset 0px 1px 0px rgba(255,255,255,0.20);
  --shadow-btn-on-dark:
    0px 0px 0px 1px rgba(255,255,255,0.20),
    0px 1px 2px 0px rgba(5,38,76,0.12);
  --shadow-btn-primary-on-dark:
    0px 0px 0px 1px var(--green-500),
    0px 1px 2px 0px var(--green-400);

  /* Radius - In-app is smaller (4-6px), landing is larger (12-20px) */
  --radius-xs: 4px;
  --radius-sm: 6px;      /* in-app buttons/inputs */
  --radius-md: 8px;      /* in-app cards / small landing btn */
  --radius-lg: 12px;     /* landing large button */
  --radius-xl: 16px;     /* landing card */
  --radius-2xl: 20px;    /* landing pricing card */
  --radius-full: 9999px;

  /* ============================================================
     TYPOGRAPHY - FAMILIES & WEIGHTS
     ============================================================ */
  --font-sans: InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   510;    /* Inter variable - optical medium */
  --fw-semibold: 540;
  --fw-bold:     580;

  /* ============================================================
     LANDING PAGE TYPESCALE (fluid)
     ============================================================ */
  --fs-display: clamp(2.5rem, 3.3vw + 1.6rem, 4rem);      /* 40 → 64 */
  --lh-display: clamp(3rem, 3.6vw + 2rem, 4.64rem);

  --fs-h1: clamp(2.5rem, 3.3vw + 1.6rem, 4rem);
  --lh-h1: clamp(3rem, 3.6vw + 2rem, 4.64rem);
  --fs-h2: clamp(2rem, 2.2vw + 1.4rem, 3rem);             /* 32 → 48 */
  --lh-h2: clamp(2.4rem, 2.4vw + 1.78rem, 3.48rem);
  --fs-h3: clamp(1.5rem, 1rem + 2.5vw, 2rem);             /* 24 → 32 */
  --lh-h3: clamp(1.8rem, 1.2rem + 3vw, 2.4rem);
  --fs-h4: clamp(1.375rem, -0.3vw + 1.57rem, 1.5rem);     /* 22 → 24 */
  --lh-h4: clamp(1.65rem, -0.2vw + 1.79rem, 1.74rem);
  --fs-h5: 1.25rem;                                       /* 20 */
  --lh-h5: 1.5;

  --fs-body:       1.125rem;   /* 18 - landing body */
  --lh-body:       1.5;
  --fs-caption-lg: 1rem;       /* 16 */
  --fs-caption-md: 0.875rem;   /* 14 */
  --fs-caption-sm: 0.8125rem;  /* 13 */

  /* ============================================================
     IN-APP TYPESCALE (compact, fixed)
     ============================================================ */
  --app-fs-hero:     2rem;      /* 32 */
  --app-lh-hero:     3rem;
  --app-fs-page:     1.5rem;    /* 24 */
  --app-lh-page:     2.25rem;
  --app-fs-section:  1rem;      /* 16 */
  --app-lh-section:  1.5rem;
  --app-fs-title:    0.875rem;  /* 14 */
  --app-lh-title:    1.25rem;
  --app-fs-title-xs: 0.8125rem; /* 13 */
  --app-lh-title-xs: 1rem;
  --app-fs-body:     0.875rem;  /* 14 */
  --app-lh-body:     1.25rem;
  --app-fs-body-xs:  0.8125rem; /* 13 */
  --app-fs-desc-2xs: 0.75rem;   /* 12 */
}

/* ============================================================
   SEMANTIC TYPE CLASSES - Landing
   ============================================================ */
body, .app { font-family: var(--font-sans); color: var(--fg-default); font-feature-settings: "liga", "calt", "ss03"; -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------
   Shadow-DOM safety net
   `font-family` does NOT inherit across Shadow DOM boundaries.
   Web components like <deck-stage> slot their children into a
   shadow root, so <body>'s font declaration never reaches them.
   Re-apply the font on common slide / surface containers so slides,
   sections, and articles always render in Inter.
   Use :where() to keep specificity at 0; authors can still override.
   --------------------------------------------------------------- */
:where(section, article, .slide, [data-slide]) {
  font-family: var(--font-sans);
}
:where(section, article, .slide, [data-slide]) :where(.code, code, pre, .font-mono) {
  font-family: var(--font-mono);
}

.h1, .text-h1 { font: var(--fw-medium) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: -0.022em; font-variation-settings: "opsz" 28; color: var(--fg-strong); }
.h2, .text-h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: -0.022em; font-variation-settings: "opsz" 28; color: var(--fg-strong); }
.h3, .text-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: -0.022em; font-variation-settings: "opsz" 28; color: var(--fg-strong); }
.h4, .text-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: -0.022em; font-variation-settings: "opsz" 24; color: var(--fg-strong); }
.h5, .text-h5 { font: var(--fw-semibold) 1.25rem/1.2 var(--font-sans); letter-spacing: -0.022em; color: var(--fg-strong); }

.body   { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--fg-weak); }
.body-m { font-weight: var(--fw-medium); }

.caption-lg { font: var(--fw-regular) var(--fs-caption-lg)/1.5 var(--font-sans); color: var(--fg-helper); }
.caption-md { font: var(--fw-regular) var(--fs-caption-md)/1.4 var(--font-sans); color: var(--fg-helper); }
.caption-sm { font: var(--fw-regular) var(--fs-caption-sm)/1.4 var(--font-sans); color: var(--fg-helper); }

.label-lg { font: var(--fw-medium) 1rem/1 var(--font-sans); }
.label-md { font: var(--fw-medium) 0.875rem/1 var(--font-sans); }
.label-sm { font: var(--fw-medium) 0.75rem/1 var(--font-sans); }

.eyebrow  { font: var(--fw-semibold) 0.875rem/1.4 var(--font-sans); color: var(--green-600); text-transform: uppercase; letter-spacing: 0.05em; }

.code, code { font-family: var(--font-mono); font-size: 0.9em; }

/* ============================================================
   SEMANTIC TYPE CLASSES - In-App (compact)
   ============================================================ */
.app-heading-hero    { font: var(--fw-semibold) var(--app-fs-hero)/var(--app-lh-hero) var(--font-sans); letter-spacing: -0.01em; color: var(--fg-strong); }
.app-heading-page    { font: var(--fw-semibold) var(--app-fs-page)/var(--app-lh-page) var(--font-sans); letter-spacing: -0.01em; color: var(--fg-strong); }
.app-heading-section { font: var(--fw-semibold) var(--app-fs-section)/var(--app-lh-section) var(--font-sans); color: var(--fg-strong); }
.app-title-sm        { font: var(--fw-semibold) var(--app-fs-title)/var(--app-lh-title) var(--font-sans); color: var(--fg-strong); }
.app-title-xs        { font: var(--fw-semibold) var(--app-fs-title-xs)/var(--app-lh-title-xs) var(--font-sans); color: var(--fg-strong); }
.app-body-sm         { font: var(--fw-regular) var(--app-fs-body)/var(--app-lh-body) var(--font-sans); color: var(--fg-default); }
.app-body-xs         { font: var(--fw-regular) var(--app-fs-body-xs)/var(--app-lh-title-xs) var(--font-sans); color: var(--fg-default); }
.app-description-xs  { font: var(--fw-regular) var(--app-fs-body-xs)/var(--app-lh-title-xs) var(--font-sans); color: var(--fg-weak); }
.app-description-2xs { font: var(--fw-regular) var(--app-fs-desc-2xs)/1rem var(--font-sans); color: var(--fg-helper); }

*::selection { color: var(--gray-900); background: var(--green-200); }
[data-theme="dark"] *::selection { color: #FFFFFF; background: var(--green-600); }