/*
 * Design tokens.
 *
 * Black, warm gold, off-white and a restrained red for warnings - the night
 * stadium palette the renderer also draws from. Everything else in the app
 * refers to these, so a contrast or text-size setting is one class away.
 */

:root {
  /* --- surfaces ---------------------------------------------------------- */
  --ink-900: #05070c;
  --ink-850: #080a0f;
  --ink-800: #0b0f18;
  --ink-700: #101521;
  --ink-600: #161d2c;
  --ink-500: #1f2839;
  --ink-400: #2b3548;

  /* --- gold -------------------------------------------------------------- */
  --gold-300: #ffe3a8;
  --gold-400: #ffd37a;
  --gold-500: #f5b63c;
  --gold-600: #c98a1e;
  --gold-700: #8c5f13;

  /* --- type -------------------------------------------------------------- */
  --bone-100: #f7f4ec;
  --bone-300: #d6d1c4;
  --slate-400: #8b93a7;
  --slate-500: #626c82;

  /* --- states ------------------------------------------------------------ */
  --alert-500: #e0483c;
  --alert-700: #5c1b16;
  --turf-500: #4fbf7b;
  --turf-700: #17422c;
  --sky-500: #7fd7f0;
  --violet-500: #9b7bf5;

  /* --- semantic ---------------------------------------------------------- */
  --bg: var(--ink-850);
  --bg-raised: var(--ink-700);
  --bg-sunken: var(--ink-900);
  --border: rgba(247, 244, 236, 0.09);
  --border-strong: rgba(247, 244, 236, 0.18);
  --text: var(--bone-100);
  --text-muted: var(--slate-400);
  --accent: var(--gold-500);
  --accent-soft: rgba(245, 182, 60, 0.14);
  --on-accent: var(--ink-900);

  /* --- shape ------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- spacing ----------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;

  /* --- type scale -------------------------------------------------------- */
  --fs-root: 16px;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.94rem;
  --fs-lg: 1.08rem;
  --fs-xl: 1.36rem;
  --fs-2xl: 1.82rem;
  --fs-3xl: 2.5rem;
  --fs-display: 3.4rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --- elevation --------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.46);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.58);
  --glow-gold: 0 0 26px rgba(245, 182, 60, 0.32);

  /* --- motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- safe areas -------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* --- chrome ------------------------------------------------------------ */
  --topbar-h: 58px;
  --tabbar-h: 62px;
  --page-max: 720px;
}

/* Accessibility overrides ------------------------------------------------- */

.large-text {
  --fs-root: 18px;
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
}

.high-contrast {
  --border: rgba(247, 244, 236, 0.28);
  --border-strong: rgba(247, 244, 236, 0.5);
  --text-muted: #b3bbcc;
  --bg-raised: #141b28;
}

.reduce-motion {
  --dur-fast: 1ms;
  --dur: 1ms;
  --dur-slow: 1ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}