/* ==========================================================================
   NavTrax — design tokens
   Extends the Aurix Defog foundation with NavTrax's own surface moods and
   brand greens. Every value below is either an Aurix token or derived from
   the NavTrax application (logo #0d4a35 / #287a50, accent #e07b00 — see
   aurix-backend/db/migrations/003_seed.sql branding_config).
   Declared once here; no other stylesheet defines a raw colour.
   ========================================================================== */

@font-face { font-family: "FallingSky"; src: url("../assets/fonts/FallingSkyLight.otf") format("opentype");    font-weight: 300; font-display: swap; }
@font-face { font-family: "FallingSky"; src: url("../assets/fonts/FallingSkyMedium.otf") format("opentype");   font-weight: 500; font-display: swap; }
@font-face { font-family: "FallingSky"; src: url("../assets/fonts/FallingSkySemibold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../assets/fonts/CabinRegular.ttf") format("truetype");       font-weight: 400; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../assets/fonts/CabinMedium.ttf") format("truetype");        font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../assets/fonts/CabinSemibold.ttf") format("truetype");      font-weight: 600; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../assets/fonts/CabinItalic.ttf") format("truetype");        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../assets/fonts/CabinMediumItalic.ttf") format("truetype");  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "ClearSans"; src: url("../assets/fonts/ClearSans.ttf") format("truetype");       font-weight: 400; font-display: swap; }
@font-face { font-family: "ClearSans"; src: url("../assets/fonts/ClearSansMedium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  /* --- Night surfaces (Aurix) ------------------------------------------ */
  --night-950: #050912;
  --night-900: #0a1020;
  --night-850: #0d1428;
  --night-800: #131b33;
  --night-700: #1b2542;
  --night-600: #2a365a;

  /* --- Pine: NavTrax's own surface family, derived from the logo green -- */
  --pine-950: #030d09;
  --pine-900: #061711;
  --pine-800: #0a2318;
  --pine-700: #0d4a35;   /* logo dark green */
  --pine-600: #167a52;
  --pine-500: #287a50;   /* branding_config primaryColor */

  /* --- Foreground (Aurix) --------------------------------------------- */
  --fg-1: #ffffff;
  --fg-2: rgba(255,255,255,0.78);
  --fg-3: rgba(255,255,255,0.58);
  --fg-4: rgba(255,255,255,0.36);
  --fg-5: rgba(255,255,255,0.16);

  /* --- Mint = live / safe / synced ------------------------------------ */
  --mint-200: #8effc7;
  --mint-300: #5ef5ad;
  --mint-400: #34e69a;
  --mint-500: #18c989;
  --mint-600: #0fa372;
  --mint-glow: rgba(52,230,154,0.55);

  /* --- Amber = act / alert / CTA -------------------------------------- */
  --amber-200: #ffc77a;
  --amber-300: #ffa64a;
  --amber-400: #ff8a1f;
  --amber-500: #f56b00;
  --amber-600: #e07b00;  /* branding_config accentColor */

  /* --- Signal accents ------------------------------------------------- */
  --azure-300: #8ed6ff;
  --azure-400: #4ab2ff;
  --azure-500: #1f8df0;
  --crimson-400: #ff6b7a;
  --crimson-500: #f04050;
  --magenta-400: #d878ff;

  /* --- Section moods -------------------------------------------------- */
  --mood-terrain:    radial-gradient(120% 90% at 20% 0%,  #0d4a35 0%, #061711 55%, #050912 100%);
  --mood-marine:     radial-gradient(120% 90% at 80% 0%,  #0e3a68 0%, #061026 55%, #050912 100%);
  --mood-alpine:     radial-gradient(120% 90% at 50% 0%,  #1b3a52 0%, #0a1626 55%, #050912 100%);
  --mood-defense:    radial-gradient(120% 90% at 30% 0%,  #4a3010 0%, #1a1008 55%, #050912 100%);
  --mood-industry:   radial-gradient(120% 90% at 70% 0%,  #2a2a10 0%, #131408 55%, #050912 100%);
  --mood-night:      radial-gradient(120% 90% at 50% 0%,  #142036 0%, #0a1426 55%, #050912 100%);

  /* --- Glass (Aurix, three tiers + master frame) ---------------------- */
  --glass-tint-1: rgba(255,255,255,0.06);
  --glass-tint-2: rgba(255,255,255,0.10);
  --glass-tint-3: rgba(255,255,255,0.14);
  --glass-tint-4: rgba(255,255,255,0.20);
  --glass-stroke-1: rgba(255,255,255,0.08);
  --glass-stroke-2: rgba(255,255,255,0.16);
  --glass-stroke-3: rgba(255,255,255,0.28);
  --glass-blur-sm: 12px;
  --glass-blur-md: 20px;
  --glass-blur-lg: 32px;
  --glass-blur-xl: 48px;
  --glass-saturate: 140%;
  --glass-inner-lift: inset 0 1px 0 rgba(255,255,255,0.18),
                      inset 0 -1px 0 rgba(255,255,255,0.04);

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

  /* --- Radii ---------------------------------------------------------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --r-2xl: 44px; --r-pill: 999px;

  /* --- Shadows -------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-4: 0 40px 120px rgba(0,0,0,0.7);
  --shadow-mint:  0 0 0 1px rgba(52,230,154,0.40), 0 8px 32px rgba(52,230,154,0.25);
  --shadow-amber: 0 0 0 1px rgba(255,138,31,0.45), 0 8px 32px rgba(255,138,31,0.30);

  /* --- Type ----------------------------------------------------------- */
  --font-display: "FallingSky", "Cabin", system-ui, sans-serif;
  --font-italic:  "Cabin", Georgia, serif;
  --font-body:    "Cabin", system-ui, sans-serif;
  --font-ui:      "ClearSans", "Cabin", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-overline: 11px; --t-eyebrow: 13px;
  --t-body-sm: 14px;  --t-body: 16px; --t-body-lg: 18px; --t-lead: 22px;
  --t-h6: 18px; --t-h5: 22px; --t-h4: 28px;
  --t-h3: clamp(28px, 3.2vw, 40px);
  --t-h2: clamp(38px, 5.2vw, 64px);
  --t-h1: clamp(46px, 7.4vw, 92px);
  --t-display: clamp(56px, 10vw, 144px);

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 600ms;

  /* --- Layout --------------------------------------------------------- */
  --max-w: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 64px;
  --subheader-h: 52px;
  --chrome-h: calc(var(--header-h) + var(--subheader-h));
  --section-y: clamp(72px, 10vw, 168px);
}

/* Track accents. A single attribute on <body> re-tints an entire page without
   any per-page colour rule: recreation reads mint, professional reads amber. */
body[data-track="recreation"]   { --accent: var(--mint-400);  --accent-soft: var(--mint-200);  --accent-glow: var(--mint-glow);            --mood: var(--mood-terrain); }
body[data-track="professional"] { --accent: var(--amber-400); --accent-soft: var(--amber-200); --accent-glow: rgba(255,138,31,0.5);        --mood: var(--mood-industry); }
body[data-track="defense"]      { --accent: var(--amber-300); --accent-soft: var(--amber-200); --accent-glow: rgba(255,166,74,0.5);        --mood: var(--mood-defense); }
body[data-track="marine"]       { --accent: var(--azure-400); --accent-soft: var(--azure-300); --accent-glow: rgba(74,178,255,0.5);        --mood: var(--mood-marine); }
body[data-track="technology"]   { --accent: var(--mint-400);  --accent-soft: var(--azure-300); --accent-glow: var(--mint-glow);            --mood: var(--mood-night); }
body                            { --accent: var(--mint-400);  --accent-soft: var(--mint-200);  --accent-glow: var(--mint-glow);            --mood: var(--mood-terrain); }