/*
  The customer-facing look: the game page's palette and the homepage's type
  headings (Cardo) with the app's Manrope for everything else (owner, 2026-10-18),
  in ONE place.

  Linked by shared/_vendor_css (application + Maglev theme layouts) and by the
  homepage, never by the admin layout, so everything below changes customer pages
  only. It re-points the Tailwind theme variables those pages already use
  (--color-surface, --color-gray-*, --font-family-*) instead of editing their
  markup: these rules are unlayered, so they win over Tailwind's `@layer theme`
  definitions whatever order the stylesheets load in.

  Only colour and type live here. Layout, spacing and sizes stay with each page.
  Brand pink (--color-brand) is deliberately untouched: the game page's own
  buttons, menu bar and footer use it.
*/
:root {
  --cream: #FFFBEB;   /* the app's original light cream (owner, 2026-10-18) */
  --cream-2: #FDF6DB; /* its original darker partner */
  --paper: oklch(0.99 0.008 80);
  --ink: oklch(0.22 0.015 50);
  --ink-2: oklch(0.38 0.018 50);
  --ink-3: oklch(0.45 0.02 50);
  --line: oklch(0.88 0.015 60);
  --line-2: oklch(0.82 0.02 55);
  --terracotta: oklch(0.62 0.13 38);
  --terracotta-deep: oklch(0.48 0.13 32);
  --clay: oklch(0.55 0.08 35);
  --blush: oklch(0.86 0.05 18);
  --pink-ink: oklch(0.45 0.10 12);
  /* The homepage's sticky "next game" bar keeps its plum (owner, 2026-10-18). */
  --plum: #8C3050;
  --serif: 'Cardo', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: var(--sans); /* small uppercase labels share the body face */

  /* Tailwind theme tokens the customer pages already use. */
  --color-surface: var(--cream);
  --color-surface-card: var(--paper);
  --color-surface-warm: var(--cream-2);
  --color-surface-subtle: var(--cream-2);
  --color-surface-highlight: var(--blush);
  --color-foreground: var(--ink);
  --color-muted: var(--ink-3);
  --color-border-subtle: var(--line);
  --color-heading: var(--terracotta);
  --font-family-display: var(--serif);
  --font-family-body: var(--sans);
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --font-mono: var(--mono);

  /* Tailwind's greys, warmed to the ink's hue at the SAME lightness, so every
     text/background contrast stays exactly what it was. */
  --color-gray-50: oklch(0.985 0.003 60);
  --color-gray-100: oklch(0.967 0.005 60);
  --color-gray-200: oklch(0.928 0.008 60);
  --color-gray-300: oklch(0.872 0.012 58);
  --color-gray-400: oklch(0.707 0.018 55);
  --color-gray-500: oklch(0.551 0.02 52);
  --color-gray-600: oklch(0.446 0.02 50);
  --color-gray-700: oklch(0.373 0.018 50);
  --color-gray-800: oklch(0.278 0.016 50);
  --color-gray-900: oklch(0.21 0.015 50);
  --color-gray-950: oklch(0.13 0.012 50);
}

/* Grey BUTTONS keep Tailwind's original cool greys (owner, 2026-10-18): the /play
   controls (settings, pause, QR, refresh, stay, help) are the only customer UI with a
   mid-grey background. Setting the variables on the element itself leaves every grey
   text and border around it warm. */
[class*="bg-gray-400"], [class*="bg-gray-500"], [class*="bg-gray-600"] {
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
}

/* Element defaults live in Tailwind's `base` layer, so every Tailwind utility class
   (`font-sans`, `bg-gray-50`, ...) and every page's own <style> block still wins over
   them. Only the :root variables above stay unlayered, because they must beat
   Tailwind's `@layer theme`. */
@layer base {
  /* Form fields stay white on the cream page (owner, 2026-10-18). Tailwind's
     preflight makes them transparent, which on white pages looked white. The :not()s
     also lift these above preflight's bare `select`/`textarea`, which loads later in
     the same layer. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select:not([hidden]),
  textarea:not([hidden]) { background-color: #fff; }
}