/**
 * Design tokens — see docs/design-system.md for the full rationale.
 *
 * District colors below are the REAL values read directly from the live
 * app's `window.DISTRICTS` global (docs/data-mapping-report.md) — they
 * replace the placeholder guesses in the original design-system.md draft.
 * Do not hand-pick new district colors independent of this source.
 */
:root {
  /* Brand gradients */
  --nac-gradient-primary: linear-gradient(90deg, #ec2f6b 0%, #f9772f 100%);
  --nac-gradient-primary-hover: linear-gradient(90deg, #d81f5c 0%, #e8661f 100%);
  --nac-gradient-footer: linear-gradient(120deg, #b3199c 0%, #ec2f6b 45%, #f9772f 100%);

  /*
   * V2 (approved-homepage parity): deep-navy dark scale replacing the old
   * near-black purple neutrals. Reference/approved-homepage.png is the
   * source of truth for this palette direction.
   */
  --nac-navy-950: #070b14;
  --nac-navy-900: #0a0f1c;
  --nac-navy-800: #101728;
  --nac-navy-700: #18213a;

  /* Core neutrals */
  --nac-bg-hero: var(--nac-navy-900);
  --nac-bg-hero-overlay: rgba(7, 11, 20, 0.55);
  --nac-ink: #12121a;
  --nac-white: #ffffff;
  --nac-muted: #9aa3b8;
  --nac-muted-on-light: #6b6875;
  --nac-muted-on-dark: #a8b0c2;

  /* Glass panel — navy-tinted per the approved reference */
  --nac-glass-bg: rgba(13, 18, 34, 0.66);
  --nac-glass-border: rgba(255, 255, 255, 0.14);
  --nac-glass-blur: 20px;
  --nac-glass-bg-flat-fallback: rgba(13, 18, 34, 0.94);

  /* Real district colors — confirmed live, see docs/data-mapping-report.md */
  --nac-district-downtown: #ff4d5a;
  --nac-district-capitol-view: #5e60ce; /* added 2026-09-25 — keep in sync with route-app.js DISTRICTS */
  --nac-district-germantown: #a06cd5;
  --nac-district-east-nashville: #4d96ff;
  --nac-district-the-gulch: #ffb020;
  --nac-district-12south: #2ec4b6;
  --nac-district-hillsboro-village: #ff8fa3;
  --nac-district-wedgewood-houston: #f15bb5;
  --nac-district-music-row: #00b4d8;
  --nac-district-the-nations: #8ac926;
  --nac-district-west-end: #ff9e00;

  /* Non-district accents */
  --nac-gold: #f5c518;
  --nac-teal: #17b8a6;
  --nac-purple: #8b5cf6;
  --nac-orange: #f9772f;
  --nac-pink: #ec2f6b;

  /*
   * V2 (approved-homepage parity): the four feature cards are now DARK
   * (Reference/approved-homepage.png) — the old light pastel tint tokens
   * are replaced by one shared dark card surface plus a per-card colored
   * eyebrow. Eyebrow values are lightened variants of the brand accents so
   * they hold AA contrast on the navy card surface.
   */
  --nac-card-bg-dark: var(--nac-navy-800);
  --nac-card-border-dark: rgba(255, 255, 255, 0.08);
  --nac-eyebrow-murals: var(--nac-gold);
  --nac-eyebrow-kids: #b9a5ff;
  --nac-eyebrow-guides: #4fd8c4;
  --nac-eyebrow-sponsors: #ffa25e;

  /* Footer — dark paint-splatter treatment (V2), accents in footer.css */
  --nac-bg-footer: var(--nac-navy-950);

  /* H-D2V-R4A (item H): homepage page background sampled from the approved
   * hero image (assets/images/hero/approved-homepage-bg.jpg, 1492x1054).
   * Literal center-bottom pixel (746,1053) = #020911; a 21x21 bottom-center
   * region reads median #02080f / mean #02080f with per-channel spread <=6
   * (JPEG noise only), so the region median is the token value. Applied to
   * body.home in base.css; the scoped nac-page-dark (navy-950) treatment on
   * Explore/Kids/About is intentionally NOT changed to this token. */
  --nac-bg-page: #02080f;

  --nac-focus-ring: #7dd3fc;

  /* Typography — H-D2V-R1: all faces SELF-HOSTED OFL (no external font
   * service). @font-face emitted by nac_fonts_inline_css() for the WOFF2
   * files in assets/fonts/ (Playfair Display 800, Archivo 200, Archivo 500;
   * see assets/fonts/SOURCES.md). Archivo Narrow is retired — body now uses
   * Archivo. The script stack targets ITC Bradley Hand delivered via an
   * Adobe Fonts kit (family name confirmed once the kit id is provided —
   * "itc-bradley-hand" is Adobe's standard slug); the local "Bradley Hand"
   * + generic cursive are the interim fallbacks. Caveat is NOT used. */
  --nac-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --nac-font-script: "itc-bradley-hand", "Bradley Hand", "Segoe Script", cursive;
  --nac-font-display: "Archivo", system-ui, sans-serif;
  --nac-font-body: "Archivo", system-ui, sans-serif;
  /* H-D2V-R1 §3A: approved desktop headline is 34px (measured against
     Reference/approved-homepage.png); responsive only BELOW the desktop
     breakpoint, never inflated above 34px at the three desktop targets. */
  --nac-fs-hero-h1: clamp(1.6rem, 1.2vw + 1rem, 2.125rem); /* caps at 34px */
  --nac-fs-h2: clamp(1.4rem, 1.2vw + 0.9rem, 1.75rem);
  --nac-fs-h3: 1.125rem;
  --nac-fs-body: 1rem;
  --nac-fs-small: 0.875rem;
  --nac-fs-micro: 0.75rem;
  /* H-D2V-R1 §3C: Archivo is self-hosted at 200 + 500 only. Requesting 700/
     900 would synthesize fake bold, so the "bold"/"black" tokens map to the
     Medium 500 exception — the heaviest weight we ship. 200 is the primary
     body/nav/label weight; nothing sets weight globally on body/header/nav. */
  --nac-fw-regular: 200;
  --nac-fw-black: 500;
  --nac-fw-bold: 500;
  --nac-fw-medium: 500;
  --nac-lh-tight: 1.05;
  --nac-lh-normal: 1.4;
  --nac-tracking-eyebrow: 0.08em;

  /* Spacing */
  --nac-space-1: 4px;  --nac-space-2: 8px;  --nac-space-3: 12px; --nac-space-4: 16px;
  --nac-space-5: 20px; --nac-space-6: 24px; --nac-space-8: 32px; --nac-space-10: 40px;
  --nac-space-12: 48px; --nac-space-16: 64px; --nac-space-20: 80px;

  /* Radii */
  --nac-radius-pill: 999px;
  --nac-radius-lg: 24px;
  --nac-radius-md: 16px;
  --nac-radius-sm: 10px;
  --nac-radius-circle: 50%;

  /* Shadows */
  --nac-shadow-card: 0 8px 24px rgba(18, 18, 26, 0.08);
  --nac-shadow-card-hover: 0 12px 32px rgba(18, 18, 26, 0.14);
  --nac-shadow-glass: 0 20px 60px rgba(0, 0, 0, 0.45);
  --nac-shadow-button: 0 6px 18px rgba(236, 47, 107, 0.35);
  --nac-shadow-focus: 0 0 0 3px var(--nac-focus-ring);

  /* Animation timing */
  --nac-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --nac-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --nac-duration-fast: 150ms;
  --nac-duration-base: 250ms;
  --nac-duration-slow: 450ms;
  --nac-duration-hero: 700ms;

  /* Breakpoints (referenced by assets/css/responsive.css) */
  --nac-bp-sm: 480px;
  --nac-bp-md: 768px;
  --nac-bp-lg: 1024px;
  --nac-bp-xl: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}