/* ------------------------------------------------------------------
 * Kadi / Koromia Apps — design tokens
 *
 * Mirrored from ../kadi-game/constants/theme.ts (Savanna palette).
 * The app is the source of truth; if it changes, this follows.
 *
 * Dark only. The app ships a light scheme too, but the site commits to
 * dark — the palette is at its strongest on near-black.
 * ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* ---- Surfaces ------------------------------------------------- */
  --bg-deep: #15110d;
  --bg-card: #1f1813;
  --bg-elev: #2a201a;
  --bg-muted: #1a1410;

  /* Felt — oxblood, deliberately distinct from the page background */
  --felt: #5c1f1f;
  --felt-stripe: #4a1818;

  /* ---- Ink ramp ------------------------------------------------- */
  --ink: #f4ecde;
  --ink-dim: #c5b49a;
  /* The app's muted ink is #8A7762. On the web that lands at 4.38:1 on
     --bg-deep and 3.71:1 on --bg-elev, which fails WCAG AA for the small
     text it is used on (eyebrows, captions, footer legal). Lightened along
     the same warm hue to clear 4.5:1 on every surface token: 5.52 / 5.15 /
     4.68. This is a deliberate divergence from the app, not drift. */
  --ink-mute: #9c8871;
  --ink-inverse: #15110d;

  /* ---- Brand ---------------------------------------------------- */
  /* --clay is the brand orange. --suit-red is the card suit red.
     They are different colours on purpose. Never collapse them. */
  --clay: #d9633d;
  --clay-pressed: #ab4d2d;
  --ochre: #e8a33b;
  --teal: #5ba897;

  /* ---- Cards ---------------------------------------------------- */
  --card-face: #f8f2e4; /* cream, never pure white */
  --card-rim: #2a201a;
  --suit-red: #c8324a;
  --suit-black: #1a140f;

  /* ---- Status --------------------------------------------------- */
  --success: #5ba897;
  --warning: #e8a33b;
  --danger: #d04545;

  /* ---- Lines ---------------------------------------------------- */
  --line: rgb(244 236 222 / 0.08);
  --line-strong: rgb(244 236 222 / 0.16);
  --border: #2a201a;

  /* ---- Type families -------------------------------------------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-card: 'Lora', ui-serif, Georgia, serif;

  /* ---- Type scale ------------------------------------------------
     Display sizes are fluid. Tracking is tight on display (-0.02 to
     -0.04em) and wide on mono eyebrows (+0.14em), matching the app. */
  --text-display-xl: clamp(2.75rem, 1.6rem + 5.75vw, 5.5rem);
  --text-display-lg: clamp(2.25rem, 1.5rem + 3.75vw, 4rem);
  --text-headline-lg: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --text-headline-md: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-headline-sm: 1.0625rem;

  --text-body-lg: 1.0625rem;
  --text-body-md: 0.9375rem;
  --text-body-sm: 0.8125rem;
  --text-label: 0.8125rem;
  --text-mono-sm: 0.6875rem;
  --text-eyebrow: 0.6875rem;

  --tracking-display-xl: -0.04em;
  --tracking-display: -0.03em;
  --tracking-headline: -0.02em;
  --tracking-eyebrow: 0.14em;
  --tracking-label: 0.02em;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Spacing (4px base, matching the app) ---------------------- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* ---- Radius ---------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-card: 8px;
  --radius-full: 9999px;

  /* ---- Elevation -------------------------------------------------- */
  --shadow-card: 0 6px 14px rgb(0 0 0 / 0.45);
  --shadow-lifted: 0 14px 28px rgb(0 0 0 / 0.55);
  --shadow-float: 0 8px 24px rgb(0 0 0 / 0.35);
  --glow-clay: 0 0 60px -10px rgb(217 99 61 / 0.55);

  /* ---- Layout ----------------------------------------------------- */
  --measure: 68ch; /* readable line length for legal and body copy */
  --container: 72rem;
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* ---- Motion ------------------------------------------------------
     Every duration below is zeroed by the reduced-motion guard in
     base.css. Never hardcode a duration outside these tokens. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 520ms;
}