/* ==========================================================================
   DESIGN TOKENS  —  "Vegas at Dusk" palette
   --------------------------------------------------------------------------
   Single source of truth for color, type, space, radius, shadow, motion.
   Every component reads from these custom properties — never hard-coded.

   This palette swaps the prior cool-navy system for a warm, sophisticated
   sunset feel: deep aubergine + electric coral + saffron + a hot magenta
   accent, on creamy beige rather than stark white. The legacy --color-navy-*
   token NAMES are kept (existing component CSS reads them directly) but are
   REDEFINED to the new aubergine ramp so the whole site warms up by one
   change to this file.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     PRIMARY — AUBERGINE / WINE  (legacy --color-navy-* aliases)
     A deep, warm violet that reads "sophisticated political". Replaces
     the prior cold steel-navy across every component that referenced it.
     ---------------------------------------------------------------------- */
  --color-navy-50:  #faf4f7;
  --color-navy-100: #f3e6ed;
  --color-navy-200: #e7c9d8;
  --color-navy-300: #d4a0bb;
  --color-navy-400: #b6708f;
  --color-navy-500: #934d6b;
  --color-navy-600: #743951;
  --color-navy-700: #5a2a3e;
  --color-navy-800: #3e1c2b;
  --color-navy-900: #2a121d;
  --color-navy-950: #170a11;

  /* Canonical aubergine names (preferred going forward) */
  --color-plum-50:  var(--color-navy-50);
  --color-plum-100: var(--color-navy-100);
  --color-plum-200: var(--color-navy-200);
  --color-plum-300: var(--color-navy-300);
  --color-plum-400: var(--color-navy-400);
  --color-plum-500: var(--color-navy-500);
  --color-plum-600: var(--color-navy-600);
  --color-plum-700: var(--color-navy-700);
  --color-plum-800: var(--color-navy-800);
  --color-plum-900: var(--color-navy-900);
  --color-plum-950: var(--color-navy-950);

  /* ----------------------------------------------------------------------
     CORAL — the new "red" — electric persimmon for energy & call-to-action
     ---------------------------------------------------------------------- */
  --color-red-50:  #fff5f1;
  --color-red-100: #ffe4da;
  --color-red-200: #ffc7b3;
  --color-red-300: #ffa384;
  --color-red-400: #ff7b54;
  --color-red-500: #ff5b30;   /* hero coral */
  --color-red-600: #e64015;
  --color-red-700: #b62f0e;
  --color-red-800: #87240b;
  --color-red-900: #5e1908;

  --color-coral-50:  var(--color-red-50);
  --color-coral-300: var(--color-red-300);
  --color-coral-400: var(--color-red-400);
  --color-coral-500: var(--color-red-500);
  --color-coral-600: var(--color-red-600);
  --color-coral-700: var(--color-red-700);

  /* ----------------------------------------------------------------------
     SAFFRON — punchy desert gold, brighter than the prior amber
     ---------------------------------------------------------------------- */
  --color-gold-50:  #fff9e8;
  --color-gold-100: #fff0c0;
  --color-gold-200: #ffe084;
  --color-gold-300: #ffc940;
  --color-gold-400: #ffae18;
  --color-gold-500: #f08c00;
  --color-gold-600: #c66c00;
  --color-gold-700: #944f02;
  --color-gold-800: #6e3a03;
  --color-gold-900: #4a2602;

  --color-saffron-300: var(--color-gold-300);
  --color-saffron-400: var(--color-gold-400);
  --color-saffron-500: var(--color-gold-500);
  --color-saffron-600: var(--color-gold-600);

  /* ----------------------------------------------------------------------
     MAGENTA — new accent. Confidence + distinctiveness without partisanship.
     Used sparingly for highlights, decorative blurbs, animated text.
     ---------------------------------------------------------------------- */
  --color-magenta-50:  #fff0f6;
  --color-magenta-100: #ffd6e4;
  --color-magenta-200: #ffadc9;
  --color-magenta-300: #ff7eaa;
  --color-magenta-400: #f04e88;
  --color-magenta-500: #d3266a;
  --color-magenta-600: #ad1751;
  --color-magenta-700: #850f3e;

  /* ----------------------------------------------------------------------
     TEAL — second cool accent, used for depth contrast against sunset warm
     ---------------------------------------------------------------------- */
  --color-teal-50:  #ecfbfb;
  --color-teal-100: #cdf3f3;
  --color-teal-200: #a3e6e6;
  --color-teal-300: #67cfcf;
  --color-teal-400: #2db1b1;
  --color-teal-500: #169494;
  --color-teal-600: #117272;
  --color-teal-700: #0f5454;
  --color-teal-800: #0c3e3e;

  /* ----------------------------------------------------------------------
     SAGE — warmer olive-sage (was a cool gray-green)
     ---------------------------------------------------------------------- */
  --color-sage-50:  #f5f6ee;
  --color-sage-100: #e7ead0;
  --color-sage-200: #cdd49e;
  --color-sage-300: #abb56b;
  --color-sage-400: #8a9648;
  --color-sage-500: #6c7836;
  --color-sage-600: #535d29;
  --color-sage-700: #3e451f;
  --color-sage-800: #2c321a;
  --color-sage-900: #1d2114;

  /* ----------------------------------------------------------------------
     CREAM / SAND  — backgrounds. Cream replaces stark white for warmth.
     ---------------------------------------------------------------------- */
  --color-cream-50:  #fffcf6;
  --color-cream-100: #fdf7eb;
  --color-cream-200: #f9ecd5;
  --color-cream-300: #f1dbb1;
  --color-sand-200:  #efe1c4;
  --color-sand-300:  #e3cb9a;

  /* ----------------------------------------------------------------------
     INK — warm-leaning grays. Coffee/espresso, not cold steel.
     ---------------------------------------------------------------------- */
  --color-ink-0:   #ffffff;
  --color-ink-50:  #fdfaf5;          /* paper */
  --color-ink-100: #f7f0e3;          /* cream */
  --color-ink-200: #ebe1cf;          /* sand */
  --color-ink-300: #ccc0ac;          /* dust */
  --color-ink-400: #9a8e7a;          /* warm taupe */
  --color-ink-500: #6f6557;          /* warm gray */
  --color-ink-600: #4d4538;          /* coffee */
  --color-ink-700: #322b22;          /* espresso */
  --color-ink-800: #1f1a14;          /* dark espresso */
  --color-ink-900: #11100c;          /* near-black warm */
  --color-ink-950: #070705;

  /* ----------------------------------------------------------------------
     SEMANTIC + SURFACE ROLES
     ---------------------------------------------------------------------- */
  --color-success: var(--color-sage-600);
  --color-success-bg: var(--color-sage-50);
  --color-warning: var(--color-gold-600);
  --color-warning-bg: var(--color-gold-50);
  --color-danger: var(--color-coral-700);
  --color-danger-bg: var(--color-coral-50);
  --color-info: var(--color-teal-600);
  --color-info-bg: var(--color-teal-50);

  /* Surface roles — cream-led, warm */
  --surface-bg: var(--color-cream-50);
  --surface-bg-alt: var(--color-cream-100);
  --surface-bg-muted: var(--color-cream-200);
  --surface-bg-inverse: var(--color-plum-900);
  --surface-bg-brand: var(--color-plum-700);
  --surface-bg-brand-soft: var(--color-plum-50);
  --surface-border: rgba(50, 43, 34, 0.12);
  --surface-border-strong: rgba(50, 43, 34, 0.22);
  --surface-border-brand: var(--color-plum-300);
  --surface-elevation: 0 1px 2px rgba(42, 18, 29, 0.06), 0 1px 1px rgba(42, 18, 29, 0.04);

  /* Text roles */
  --text-strong: var(--color-ink-900);
  --text-body: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-subtle: var(--color-ink-400);
  --text-inverse: var(--color-cream-50);
  --text-on-brand: var(--color-cream-50);
  --text-brand: var(--color-plum-700);
  --text-accent: var(--color-coral-600);
  --text-magenta: var(--color-magenta-500);
  --text-saffron: var(--color-saffron-600);
  --text-link: var(--color-plum-700);
  --text-link-hover: var(--color-coral-600);
  --text-link-visited: var(--color-plum-800);

  /* Focus rings — high-contrast on cream */
  --focus-ring: 0 0 0 3px rgba(255, 91, 48, 0.45);
  --focus-ring-inverse: 0 0 0 3px rgba(255, 201, 64, 0.6);
  --focus-outline-width: 3px;
  --focus-outline-style: solid;
  --focus-outline-color: var(--color-coral-500);

  /* ----------------------------------------------------------------------
     SIGNATURE GRADIENTS  — composed from the warm palette
     ---------------------------------------------------------------------- */
  --grad-sunset:        linear-gradient(135deg, var(--color-coral-500) 0%, var(--color-saffron-400) 100%);
  --grad-dusk:          linear-gradient(135deg, var(--color-magenta-500) 0%, var(--color-coral-500) 50%, var(--color-saffron-400) 100%);
  --grad-dawn:          linear-gradient(135deg, var(--color-plum-700) 0%, var(--color-coral-500) 60%, var(--color-saffron-400) 100%);
  --grad-vegas:         linear-gradient(120deg, var(--color-magenta-500), var(--color-coral-500), var(--color-saffron-400));
  --grad-noir:          linear-gradient(180deg, var(--color-plum-800) 0%, var(--color-plum-950) 100%);
  --grad-plum:          linear-gradient(135deg, var(--color-plum-700), var(--color-plum-500));
  --grad-red:           linear-gradient(135deg, var(--color-coral-600), var(--color-coral-400));
  --grad-coral:         var(--grad-red);
  --grad-gold:          linear-gradient(135deg, var(--color-gold-600), var(--color-gold-300));
  --grad-saffron:       var(--grad-gold);
  --grad-sage:          linear-gradient(135deg, var(--color-sage-700), var(--color-sage-400));
  --grad-civic:         linear-gradient(135deg, var(--color-plum-800), var(--color-coral-500), var(--color-saffron-400));
  --grad-desert-twilight: linear-gradient(180deg, var(--color-plum-900) 0%, var(--color-coral-600) 70%, var(--color-saffron-400) 100%);
  --grad-magenta:       linear-gradient(135deg, var(--color-magenta-600), var(--color-magenta-300));
  --grad-teal:          linear-gradient(135deg, var(--color-teal-600), var(--color-teal-300));
  --grad-navy:          var(--grad-plum);
  --grad-sunset-soft:   linear-gradient(180deg, var(--color-cream-100), var(--color-coral-100));
  --grad-paper:         linear-gradient(180deg, var(--color-cream-50), var(--color-cream-200));

  /* ----------------------------------------------------------------------
     TYPOGRAPHY  — system stack with optional webfonts
     Display headlines now use Fraunces (high-contrast serif with optical
     sizing) as the primary; falls back to Public Sans then system.
     ---------------------------------------------------------------------- */

  --font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-serif: "Fraunces", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --font-display:
    "Fraunces", "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display-alt:
    "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Step ratio = 1.250 — but display gets BIGGER for editorial drama */
  --font-size-3xs: 0.640rem;
  --font-size-2xs: 0.694rem;
  --font-size-xs:  0.800rem;
  --font-size-sm:  0.875rem;
  --font-size-base: 1.000rem;
  --font-size-md:  1.125rem;
  --font-size-lg:  1.250rem;
  --font-size-xl:  1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
  --font-size-5xl: 3.815rem;
  --font-size-6xl: 4.768rem;
  --font-size-7xl: 5.960rem;
  --font-size-8xl: 7.451rem;     /* new — for editorial drama */
  --font-size-9xl: 9.313rem;

  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --leading-loose: 1.85;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --tracking-tighter: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.18em;

  --measure-narrow: 32ch;
  --measure-prose: 65ch;
  --measure-wide: 80ch;

  /* ----------------------------------------------------------------------
     SPACING  — 4px base, T-shirt scale
     ---------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;

  --section-y: clamp(3rem, 8vw, 7.5rem);
  --section-y-sm: clamp(2rem, 5vw, 4rem);
  --section-y-lg: clamp(4rem, 12vw, 11rem);

  /* ----------------------------------------------------------------------
     RADII  — slightly more generous, more modern
     ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:  0.125rem;
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-4xl: 2.75rem;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
     SHADOWS  — warmer (espresso-tinted) drops; richer at large sizes
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(42, 18, 29, 0.06);
  --shadow-sm:
    0 1px 3px rgba(42, 18, 29, 0.08),
    0 1px 2px rgba(42, 18, 29, 0.04);
  --shadow-md:
    0 4px 12px rgba(42, 18, 29, 0.10),
    0 2px 4px rgba(42, 18, 29, 0.06);
  --shadow-lg:
    0 16px 32px rgba(42, 18, 29, 0.12),
    0 4px 12px rgba(42, 18, 29, 0.06);
  --shadow-xl:
    0 28px 56px rgba(42, 18, 29, 0.18),
    0 10px 20px rgba(42, 18, 29, 0.08);
  --shadow-2xl:
    0 40px 80px rgba(42, 18, 29, 0.24),
    0 16px 32px rgba(42, 18, 29, 0.12);
  --shadow-3xl:
    0 60px 120px rgba(42, 18, 29, 0.28),
    0 24px 48px rgba(42, 18, 29, 0.14);

  --shadow-inset-sm: inset 0 1px 2px rgba(42, 18, 29, 0.06);
  --shadow-inset-md: inset 0 2px 4px rgba(42, 18, 29, 0.10);

  /* Brand-tinted shadow for primary CTA — coral glow */
  --shadow-brand: 0 16px 32px -8px rgba(255, 91, 48, 0.45);
  --shadow-brand-strong: 0 28px 56px -12px rgba(255, 91, 48, 0.55);

  /* Themed glows */
  --shadow-glow-coral:   0 0 0 1px rgba(255, 91, 48, 0.20), 0 16px 48px -16px rgba(255, 91, 48, 0.60);
  --shadow-glow-saffron: 0 0 0 1px rgba(240, 140, 0, 0.20), 0 16px 48px -16px rgba(240, 140, 0, 0.60);
  --shadow-glow-magenta: 0 0 0 1px rgba(211, 38, 106, 0.20), 0 16px 48px -16px rgba(211, 38, 106, 0.60);
  --shadow-glow-plum:    0 0 0 1px rgba(90, 42, 62, 0.20), 0 16px 48px -16px rgba(90, 42, 62, 0.60);
  --shadow-glow-blue: var(--shadow-glow-plum);   /* alias for legacy refs */
  --shadow-glow-gold: var(--shadow-glow-saffron); /* alias for legacy refs */

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  --motion-instant: 80ms;
  --motion-fast:   140ms;
  --motion-base:   240ms;
  --motion-slow:   420ms;
  --motion-slower: 640ms;
  --motion-slowest: 1000ms;

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-xs: 32rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --container-2xl: 96rem;
  --container-prose: 38rem;
  --container-wide: 90rem;

  --gutter: clamp(1rem, 4vw, 2rem);
  --gutter-tight: clamp(0.75rem, 2vw, 1.25rem);
  --gutter-wide: clamp(2rem, 6vw, 4rem);

  --header-height: 4.5rem;
  --header-height-scrolled: 3.5rem;
  --footer-min-height: 18rem;

  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2.4vw, 1.5rem);
  --grid-gap-tight: clamp(0.5rem, 1.4vw, 1rem);
  --grid-gap-wide: clamp(1.5rem, 4vw, 3rem);

  /* ----------------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-banner: 200;
  --z-dropdown: 800;
  --z-overlay: 900;
  --z-modal-backdrop: 1000;
  --z-modal: 1010;
  --z-toast: 1100;
  --z-tooltip: 1200;
  --z-max: 9999;

  --bp-sm: 36rem;
  --bp-md: 48rem;
  --bp-lg: 62rem;
  --bp-xl: 80rem;
  --bp-2xl: 96rem;

  /* ----------------------------------------------------------------------
     COMPONENT-SPECIFIC TOKENS
     ---------------------------------------------------------------------- */

  /* Buttons */
  --btn-height-sm: 2.25rem;
  --btn-height-md: 2.75rem;
  --btn-height-lg: 3.25rem;
  --btn-height-xl: 3.75rem;
  --btn-padding-x-sm: 0.875rem;
  --btn-padding-x-md: 1.25rem;
  --btn-padding-x-lg: 1.75rem;
  --btn-padding-x-xl: 2.25rem;
  --btn-radius: var(--radius-pill);          /* PILL by default — sexier */
  --btn-radius-pill: var(--radius-pill);
  --btn-weight: var(--weight-semibold);
  --btn-tracking: var(--tracking-wide);

  /* Forms */
  --field-height: 3rem;
  --field-padding-x: 1.125rem;
  --field-padding-y: 0.75rem;
  --field-radius: var(--radius-lg);
  --field-border-width: 1.5px;
  --field-border-color: rgba(50, 43, 34, 0.15);
  --field-border-color-hover: rgba(50, 43, 34, 0.30);
  --field-border-color-focus: var(--color-coral-500);
  --field-border-color-error: var(--color-coral-700);
  --field-bg: var(--color-cream-50);
  --field-text: var(--color-ink-800);
  --field-placeholder: var(--color-ink-400);

  /* Cards */
  --card-bg: var(--color-cream-50);
  --card-border-color: rgba(50, 43, 34, 0.10);
  --card-radius: var(--radius-2xl);
  --card-padding: clamp(1.25rem, 2vw, 2rem);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Navigation */
  --nav-link-padding-x: 1rem;
  --nav-link-padding-y: 0.625rem;
  --nav-link-radius: var(--radius-pill);

  /* Issue-specific accent colors — re-mapped to warm palette */
  --issue-homelessness-accent: var(--color-coral-600);
  --issue-homelessness-tint:   var(--color-coral-50);
  --issue-commercial-accent:   var(--color-saffron-600);
  --issue-commercial-tint:     var(--color-gold-50);
  --issue-affordability-accent: var(--color-sage-600);
  --issue-affordability-tint:   var(--color-sage-50);
  --issue-accountability-accent: var(--color-plum-700);
  --issue-accountability-tint:   var(--color-plum-50);
}

/* --------------------------------------------------------------------------
   DARK MODE  — "after hours" Vegas. Plum-noir backgrounds, coral highlights.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root:not([data-theme]) {
    --surface-bg: var(--color-plum-950);
    --surface-bg-alt: var(--color-plum-900);
    --surface-bg-muted: var(--color-plum-800);
    --surface-bg-brand-soft: var(--color-plum-800);
    --surface-border: rgba(255, 230, 215, 0.10);
    --surface-border-strong: rgba(255, 230, 215, 0.20);
    --text-strong: var(--color-cream-50);
    --text-body: var(--color-cream-100);
    --text-muted: var(--color-ink-300);
    --text-subtle: var(--color-ink-400);
    --text-link: var(--color-saffron-400);
    --text-link-hover: var(--color-coral-400);
    --card-bg: rgba(255, 252, 246, 0.04);
    --card-border-color: rgba(255, 230, 215, 0.10);
    --field-bg: rgba(255, 252, 246, 0.04);
    --field-text: var(--color-cream-50);
    --field-placeholder: var(--color-ink-400);
    --field-border-color: rgba(255, 230, 215, 0.18);
  }
}

:root[data-theme="dark"] {
  --surface-bg: var(--color-plum-950);
  --surface-bg-alt: var(--color-plum-900);
  --surface-bg-muted: var(--color-plum-800);
  --surface-bg-brand-soft: var(--color-plum-800);
  --surface-border: rgba(255, 230, 215, 0.10);
  --surface-border-strong: rgba(255, 230, 215, 0.20);
  --text-strong: var(--color-cream-50);
  --text-body: var(--color-cream-100);
  --text-muted: var(--color-ink-300);
  --text-subtle: var(--color-ink-400);
  --text-link: var(--color-saffron-400);
  --text-link-hover: var(--color-coral-400);
  --card-bg: rgba(255, 252, 246, 0.04);
  --card-border-color: rgba(255, 230, 215, 0.10);
  --field-bg: rgba(255, 252, 246, 0.04);
  --field-text: var(--color-cream-50);
  --field-placeholder: var(--color-ink-400);
  --field-border-color: rgba(255, 230, 215, 0.18);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 1ms;
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
    --motion-slower: 1ms;
    --motion-slowest: 1ms;
  }
}

/* --------------------------------------------------------------------------
   FORCED COLORS (Windows High Contrast Mode)
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  :root {
    --focus-outline-color: Highlight;
    --color-plum-700: CanvasText;
    --color-navy-700: CanvasText;
  }
}