/* ============================================================
   Halte Design Tokens
   ============================================================
   Single source of truth for the whole product: the landing
   page (/) and the app pages (/search, /journey, /stop, /map).

   Brand: Neo-Brutalist. Butter yellow, black ink, charcoal and
   sage; 2px black borders; hard offset shadows; Cabinet Grotesk
   for display, Satoshi for body (both self-hosted, see
   FONTSHARE_LICENCE.md).

   Yellow is only ever a fill under ink text, or text on
   ink/charcoal. Contrast ratios are listed next to the text
   colours below (all WCAG AA or better).

   Legacy names (--gold-*, --text-*, --bg-*) are kept because the
   components reference them; they now carry the brand values.
   Spacing follows a 4px grid: 4/8/12/16/20/24/32/48.
   ============================================================ */

/* --- Self-hosted brand fonts (no third-party font CDN) --- */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/static/fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/static/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- brand palette --- */
  --yellow:          #FFE17C;
  --yellow-tint:     #FFF3C9;   /* hover / highlighted rows under ink text */
  --charcoal:        #171E19;
  --charcoal-2:      #272727;
  --sage:            #B7C6C2;
  --ink:             #000000;
  --paper:           #FFFFFF;
  --paper-2:         #F4F4F4;   /* muted surface ("before" panels, skeletons) */

  /* --- legacy accent names (components use these) --- */
  --gold:            var(--ink);
  --gold-hover:      #1F1F1F;
  --gold-press:      var(--ink);
  --gold-muted:      var(--yellow-tint);
  --gold-focus:      rgba(0, 0, 0, 0.35);

  /* --- surfaces --- */
  --bg:              var(--paper);
  --bg-raised:       var(--paper);
  --bg-overlay:      var(--paper);
  --bg-card:         var(--paper);
  --bg-card-hover:   var(--paper-2);
  --bg-input:        var(--paper);
  --bg-header:       var(--yellow);

  /* --- borders --- */
  --border-width:    2px;
  --border:          var(--ink);
  --border-subtle:   rgba(0, 0, 0, 0.12);
  --border-strong:   var(--ink);

  /* --- text (ratios on paper #FFF) --- */
  --text-primary:    var(--ink);   /* 21:1 */
  --text-secondary:  #2E3530;      /* 12.6:1 */
  --text-tertiary:   #555C57;      /* 6.9:1 */
  --text-inverse:    var(--paper);

  /* --- route badge colours (route identity, unchanged) --- */
  --route-trunk:     #E4003A;
  --route-direct:    #0072BC;
  --route-area:      #00843D;
  --route-uct:       #003F5C;
  --route-purple:    #9B51E0;
  --route-orange:    #F2994A;

  /* --- semantic --- */
  --success:         #00843D;
  --warning:         #B45309;
  --danger:          #C81E1E;
  --info:            var(--ink);

  /* --- load shedding stages (tinted fill + ink border) --- */
  --ls-ok-bg:        #D7F0E2;
  --ls-ok-fg:        #064E30;      /* 8.2:1 on its fill */
  --ls-warn-bg:      var(--yellow);
  --ls-warn-fg:      var(--ink);   /* 16.3:1 on yellow */
  --ls-crit-bg:      #FFD9D6;
  --ls-crit-fg:      #8A1010;      /* 7.5:1 on its fill */

  /* --- spacing (4px grid) --- */
  --sp-1:            4px;
  --sp-2:            8px;
  --sp-3:            12px;
  --sp-4:            16px;
  --sp-5:            20px;
  --sp-6:            24px;
  --sp-8:            32px;
  --sp-12:           48px;

  /* --- radii (brutalist: small and consistent) --- */
  --radius-xs:       4px;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       10px;
  --radius-xl:       12px;
  --radius-full:     9999px;

  /* --- hard offset shadows --- */
  --shadow-sm:       2px 2px 0 var(--ink);
  --shadow-std:      4px 4px 0 var(--ink);
  --shadow-md:       var(--shadow-std);
  --shadow-lg:       8px 8px 0 var(--ink);
  --shadow-hero:     12px 12px 0 var(--ink);
  --shadow-glow:     none;

  /* --- typography --- */
  --font-display:    "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:       "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font:            var(--font-body);
  --font-mono:       'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  --text-xs:         0.75rem;    /* 12px */
  --text-sm:         0.8125rem;  /* 13px */
  --text-base:       0.9375rem;  /* 15px */
  --text-md:         1rem;       /* 16px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.5rem;     /* 24px */
  --text-2xl:        2rem;       /* 32px */
  --text-3xl:        2.75rem;    /* 44px */

  /* --- transitions --- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   120ms;
  --duration:        200ms;
  --duration-slow:   350ms;

  /* --- layout --- */
  --container-max:   1152px;     /* 1120px content + 16px gutters, matches landing */
  --header-height:   64px;
}

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration:      0ms;
    --duration-slow: 0ms;
  }
}