:root {
  /* =========================================
     BRAND COLOR SCALE
     The original palette (50/100/200/400/600/
     800/900) is preserved. Intermediate stops
     (300/500/700) collapse onto neighbors so
     legacy var(--blue-300) etc. usages stay
     readable instead of washing out.
     ========================================= */

  /* Blues — brand navy; action steps repointed to the teal accent system
     (Quiet Authority: one accent). Legacy panel stylesheets consume
     --blue-400/600 for CTAs and links ~350×; repointing here re-skins them
     all in one move. 700/800/900 stay ink/navy. */
  --blue-50:  #F0FDFA;
  --blue-100: #CCFBF1;
  --blue-200: #5EEAD4;
  --blue-300: #5EEAD4;   /* alias of 200 — preserves legacy usage */
  --blue-400: #14B8A6;   /* primary action — interactive */
  --blue-500: #0F766E;   /* alias of 600 — preserves legacy usage */
  --blue-600: #0F766E;   /* primary action — pressed / strong */
  --blue-700: #0F1E36;   /* alias of 800 — preserves legacy usage */
  --blue-800: #0F1E36;
  --blue-900: #0A1628;   /* brand navy — hero, footer */

  /* Teals — secondary accent (codebase uses 200/300/700/800) */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0F766E;   /* primary accent — CTA, success */
  --teal-700: #115E59;   /* dark teal text on light teal bg */
  --teal-800: #134E4A;
  --teal-900: #042F2E;

  /* Reds — error, danger, destructive (formalizes hardcoded values) */
  --red-50:  #FCEBEB;
  --red-100: #FEE2E2;
  --red-500: #B23B3B;
  --red-600: #A32D2D;    /* primary error */
  --red-700: #8B2525;    /* error hover (was hardcoded #8B2525) */
  --red-800: #7A1E1E;    /* error text on light bg (was hardcoded #7a1e1e) */

  /* Ambers — warning, caution (formalizes hardcoded values) */
  --amber-50:  #FAEEDA;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-600: #854F0B;   /* primary warning */
  --amber-700: #663C00;   /* warning text on light bg (was hardcoded #663c00) */
  --amber-900: #3D2400;

  /* Grays — original scale preserved.
     Intermediate stops (200/400/600/800) alias to the next
     darker neighbor so legacy text using var(--gray-400) etc.
     stays readable. */
  --gray-50:  #F7F8FC;
  --gray-100: #E2E8F0;
  --gray-200: #E2E8F0;   /* alias of 100 — preserves legacy usage */
  --gray-300: #CBD5E1;
  --gray-400: #64748B;   /* alias of 500 — keeps muted text readable */
  --gray-500: #64748B;
  --gray-600: #334155;   /* alias of 700 — keeps secondary text readable */
  --gray-700: #334155;
  --gray-800: #0F172A;   /* alias of 900 — keeps strong text readable */
  --gray-900: #0F172A;
  --white:    #FFFFFF;

  /* Greens — success indicators (referenced but missing) */
  --green-50:  #F0FDF4;
  --green-600: #16A34A;

  /* Directional surfaces — breaks F7F8FC monotony */
  --surface-warm: #F5F3EF;   /* warm off-white, humanizes editorial sections */
  --surface-cool: #F0F4F8;   /* cool pale slate, signals browse/explore mode */
  --amber-warm: #C2855A;     /* muted terracotta — testimonial warmth only */
  --amber-warm-bg: #FAF5F0;  /* very light warm wash */

  /* Shape and elevation */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.07);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.09);
  --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.12);

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 1.15rem;
  --text-2xl: 1.4rem;
  --text-display: clamp(2.4rem, 5.5vw, 3.75rem);
  --text-display-xl: clamp(2.6rem, 6vw, 4.5rem);

  /* Landing v2 "Quiet Authority" palette — editorial warm paper + ink */
  --paper: #FAF9F6;
  --paper-deep: #F3F1EB;
  --ink: #0A1628;
  --ink-soft: #3D4A5C;
  --ink-faint: #6B7686;
  --hairline: rgba(10, 22, 40, 0.12);
  --lp2-section-pad: clamp(80px, 12vw, 150px);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Shared shell surface tokens (app shell + landing) */
  --shell-nav-bg: rgba(247, 248, 252, 0.94);
  --shell-nav-border: rgba(203, 213, 225, 0.72);
  --shell-nav-height: 68px;
  --shell-nav-pad-inline: 2.25rem;
  --shell-nav-shadow: 0 1px 0 rgba(10, 22, 40, 0.04);
  --shell-nav-bg-dark: rgba(13, 17, 23, 0.95);
  --shell-nav-border-dark: #21262D;

  --shell-hero-bg: linear-gradient(180deg, #0A1628 0%, #11355D 100%);
  --shell-hero-bg-dark: #060D16;
  --shell-hero-padding: 6rem 2rem 4.75rem;

  /* Real gradient: deep teal → mid teal (was a flat gradient w/ same start+end) */
  --shell-cta-gradient: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-500) 100%);
  --shell-cta-gradient-hover: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-600) 100%);

  /* Z-index scale — organize stacking context */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-notification: 80;
  --z-max: 99;

  /* =========================================
     SEMANTIC TOKENS — intent-based mappings
     Use these in NEW components for automatic
     theme adaptation. Existing components keep
     their direct brand-token references.
     ========================================= */

  /* Text */
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted:     var(--gray-500);
  --color-text-inverse:   var(--white);
  --color-text-link:      var(--blue-600);
  --color-text-accent:    var(--teal-600);

  /* Surfaces */
  --color-surface:         var(--white);
  --color-surface-raised:  var(--gray-50);
  --color-surface-sunken:  var(--gray-100);

  /* Borders */
  --color-border-subtle:  var(--gray-100);
  --color-border-default: var(--gray-300);
  --color-border-strong:  var(--gray-500);
  --color-border-accent:  var(--teal-500);
  --color-border-focus:   var(--blue-400);

  /* Status — success */
  --color-success-fg:     var(--teal-600);
  --color-success-bg:     var(--teal-50);
  --color-success-border: var(--teal-500);

  /* Status — warning */
  --color-warning-fg:     var(--amber-700);
  --color-warning-bg:     var(--amber-50);
  --color-warning-border: var(--amber-600);

  /* Status — danger / error */
  --color-danger-fg:     var(--red-800);
  --color-danger-bg:     var(--red-50);
  --color-danger-border: var(--red-600);
  --color-danger-hover:  var(--red-700);

  /* Status — info */
  --color-info-fg:     var(--blue-800);
  --color-info-bg:     var(--blue-50);
  --color-info-border: var(--blue-600);

  /* Primary accent aliases (maps to teal — CTA / action color) */
  --primary-50:  var(--teal-50);
  --primary-200: var(--teal-200);
  --primary-500: var(--teal-500);
  --primary-600: var(--teal-600);

  /* Effects — focus rings, overlays, scrims */
  --color-focus-ring:        rgba(55, 138, 221, 0.25);   /* blue-400 alpha */
  --color-focus-ring-danger: rgba(163, 45, 45, 0.20);    /* red-600 alpha */
  --color-focus-ring-accent: rgba(15, 118, 110, 0.20);   /* teal-600 alpha */
  --color-overlay-backdrop:  rgba(10, 22, 40, 0.50);     /* blue-900 alpha */
  --color-overlay-scrim:     rgba(10, 22, 40, 0.70);
  --color-shadow-tint:       rgba(10, 22, 40, 0.10);
}

[data-theme="dark"] {
  /* Blues — semantically inverted (50 darkest, 900 lightest brand navy text) */
  --blue-50:  #0E1E2C;
  --blue-100: #162E45;
  --blue-200: #1D4F78;
  --blue-300: #1D4F78;   /* alias of 200 */
  --blue-400: #378ADD;   /* keeps consistent action color */
  --blue-500: #5B9BD5;   /* alias of 600 in dark */
  --blue-600: #5B9BD5;
  --blue-700: #7DAEE0;   /* alias of 800 */
  --blue-800: #7DAEE0;
  --blue-900: #A8C8F0;   /* brand navy → light blue text in dark mode */

  /* Teals — lighter in dark mode for visibility */
  --teal-50:  #0A2018;
  --teal-100: #1A4033;
  --teal-200: #1F6B5C;
  --teal-300: #2E8E78;
  --teal-400: #3AB088;
  --teal-500: #4ECBA0;
  --teal-600: #4ECBA0;   /* matches 500 in dark for stronger CTA */
  --teal-700: #6CD9B0;
  --teal-800: #99F6E4;
  --teal-900: #CCFBF1;

  /* Reds — inverted */
  --red-50:  #2A0E0E;
  --red-100: #5C1414;
  --red-500: #C25555;
  --red-600: #E07171;
  --red-700: #FCA5A5;
  --red-800: #FECACA;

  /* Ambers — inverted */
  --amber-50:  #2A1A00;
  --amber-100: #3D2400;
  --amber-200: #4D2D00;
  --amber-600: #E8A53A;
  --amber-700: #FCD34D;
  --amber-900: #FEF3C7;

  /* Grays — inverted (50 darkest, 900 lightest text). Intermediate stops
     alias to neighbors so legacy gray-400/600/800 usages stay readable. */
  --gray-50:  #161B22;
  --gray-100: #21262D;
  --gray-200: #21262D;   /* alias of 100 */
  --gray-300: #30363D;
  --gray-400: #8B949E;   /* alias of 500 — readable muted text */
  --gray-500: #8B949E;
  --gray-600: #B1BAC4;   /* alias of 700 — readable secondary text */
  --gray-700: #B1BAC4;
  --gray-800: #E6EDF3;   /* alias of 900 — strong text */
  --gray-900: #E6EDF3;
  /* --white is NOT redefined in dark mode — it must always be #FFFFFF */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Primary accent aliases — dark mode */
  --primary-50:  var(--teal-50);
  --primary-200: var(--teal-200);
  --primary-500: var(--teal-500);
  --primary-600: var(--teal-600);

  /* Effects re-tuned for dark mode */
  --color-focus-ring:        rgba(55, 138, 221, 0.40);
  --color-focus-ring-danger: rgba(252, 165, 165, 0.30);
  --color-focus-ring-accent: rgba(78, 203, 160, 0.30);
  --color-overlay-backdrop:  rgba(0, 0, 0, 0.70);
  --color-overlay-scrim:     rgba(0, 0, 0, 0.85);
  --color-shadow-tint:       rgba(0, 0, 0, 0.40);
}