/* ==========================================================================
   Cabzy design tokens
   --------------------------------------------------------------------------
   Ported verbatim from the Claude Design export in `design/_ds/`. Values are
   copied, not re-derived: when the design system is re-exported, this file is
   what gets replaced, and nothing else should need to change.

   The one deliberate difference from the export: the @font-face block is gone.
   The export served Poppins and Inter from jsDelivr; index.html loads the same
   two families from Google Fonts instead, which is what this app already did
   for Inter and saves a second font origin to preconnect to. The family stacks
   below are unchanged, so a swap back to self-hosted files means adding
   @font-face rules here and touching nothing else.

   Rule of thumb when writing component CSS: reach for a semantic alias
   (--surface-card, --text-muted) rather than a raw palette entry
   (--pure-white, --gray-500). The aliases are the part designed to be stable.
   ========================================================================== */

:root {
  /* --- brand palette ----------------------------------------------------- */
  --cabzy-yellow: #f5a623;
  --cabzy-yellow-hover: #e6951a;
  --cabzy-yellow-press: #d4880f;
  --deep-navy: #0f172a;
  --cabzy-black: #111111;
  --pure-white: #ffffff;

  /* --- neutrals ---------------------------------------------------------- */
  --gray-050: #f2f2f2;
  --gray-100: #e5e7eb;
  --gray-200: #d1d5db;
  --gray-500: #64748b;
  /* Not in the export. Added because the export's --text-muted (--gray-500)
     measures 3.84:1 against --surface-page, and WCAG AA wants 4.5:1 for body
     text — every muted paragraph sitting directly on the grey page failed.
     On a white card --gray-500 is fine (4.76:1), so the defect only shows on
     the page background, which is exactly where the hero lede, the section
     ledes and the stat labels live. This is the same slate, darkened until it
     passes on grey: 4.80:1 on the page, 5.9:1 on a card. */
  --gray-600: #59647a;
  --gray-800: #1f2937;

  /* --- semantic status --------------------------------------------------- */
  --red-600: #dc2626;
  --green-600: #16a34a;
  --green-050: #e8f6ec;

  /* Alpha washes — the yellow tints used for hover and selected states. */
  --accent-wash: rgba(245, 166, 35, 0.15);
  --accent-wash-strong: rgba(245, 166, 35, 0.2);
  --scrim: rgba(15, 23, 42, 0.4);

  /* --- semantic aliases -------------------------------------------------- */
  --accent: var(--cabzy-yellow);
  --accent-hover: var(--cabzy-yellow-hover);
  --accent-press: var(--cabzy-yellow-press);
  --on-accent: var(--cabzy-black);

  --text-body: var(--cabzy-black);
  --text-heading: var(--deep-navy);
  /* --gray-600, not the export's --gray-500 — see the note on --gray-600. The
     palette entry is left exactly as exported; the semantic alias is the layer
     meant to be adjusted, so a re-export does not silently undo this. */
  --text-muted: var(--gray-600);
  --text-inverse: var(--pure-white);
  --text-link: var(--cabzy-yellow);

  --surface-page: var(--gray-100);
  --surface-app: var(--gray-050);
  --surface-card: var(--pure-white);
  --surface-subtle: var(--gray-100);
  --surface-inverse: var(--cabzy-black);
  --surface-selected: var(--cabzy-yellow);
  --surface-hover: var(--accent-wash);

  --border-subtle: var(--gray-100);
  --border-strong: var(--gray-200);
  --focus-ring: var(--cabzy-yellow);

  --status-error: var(--red-600);
  --status-success: var(--green-600);
  --status-pending-bg: var(--accent-wash-strong);
  --status-complete-bg: var(--green-050);

  /* --- typography -------------------------------------------------------- */
  --font-primary: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display: 2.5rem;

  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.5;

  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-button: 0.02em;
  --tracking-otp: 0.3em;

  /* Named roles. Poppins carries display and titles; Inter carries every
     UI string, label, fare and list row. */
  --type-display: var(--weight-black) var(--text-display) / var(--leading-tight) var(--font-primary);
  --type-title: var(--weight-bold) var(--text-xl) / var(--leading-tight) var(--font-primary);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-ui);
  --type-label: var(--weight-medium) var(--text-sm) / var(--leading-snug) var(--font-ui);
  --type-button: var(--weight-bold) var(--text-md) / 1 var(--font-ui);
  --type-caption: var(--weight-regular) var(--text-2xs) / var(--leading-snug) var(--font-ui);

  /* --- spacing ----------------------------------------------------------- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;

  /* Layout constants. --header-h is 68px here rather than the export's 56px:
     the exported SiteHeader lays out at 68 and the old 56 was the map-overlay
     header this redesign replaces. */
  --header-h: 68px;
  /* The offline / back-online bar. Fixed, because .has-connection-bar offsets
     the sticky header by exactly this much — see .connection-bar in styles.css,
     which also clips its text to one line so the two can never disagree. */
  --connection-bar-h: 34px;
  --tap-min: 44px;
  --sheet-max-h: 72vh;
  --panel-w: 300px;
  --content-max: 600px;
  --auth-max: 440px;
  --app-max: 1200px;
  --gutter: 16px;

  /* --- radius ------------------------------------------------------------ */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* --- elevation --------------------------------------------------------- */
  /* Navy-tinted, soft and wide — never dark. */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.16);
  --shadow-sheet: 0 -4px 30px rgba(15, 23, 42, 0.12);
  --ring-focus: 0 0 0 2px var(--focus-ring);

  /* --- motion ------------------------------------------------------------ */
  /* One curve for everything. No bounce, no spring, no parallax. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.3s;
  --transition: var(--duration-base) var(--ease-standard);
  --press-scale: 0.98;
}