/*
  The customer-facing look, in ONE place: Cardo headings with Manrope for
  everything else (owner, 2026-10-18), and the wine accent (owner, 2026-11-10; it
  replaced brand pink #CD5D86). The cream page background is unchanged.

  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-brand, --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. The admin
  layout keeps Tailwind's own @theme values (brand pink) untouched.

  Colour, type and the shared card/button shapes live here. Layout, spacing and
  sizes stay with each page.
*/

:root {
  --cream: #FFFBEB;   /* the app's original light cream (owner, 2026-10-18) */
  --cream-2: #FDF6DB; /* its original darker partner */
  --surround: #FFFEF8; /* around a fixed-width page column on wide screens (owner, 2026-11-10) */
  --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);
  /* The terracotta accents (eyebrow labels, "LEARN MORE" links, icons, accent
     words) follow the wine accent (owner, 2026-11-10; was oklch 0.62/0.48 0.13
     38/32 terracotta, 0.55 0.08 35 clay, 0.45 0.10 12 pink-ink). */
  --terracotta: var(--wine);
  --terracotta-deep: var(--wine);
  --clay: var(--wine-hover);
  /* Blush / pink-tint fills follow the wine tint (owner, 2026-11-10; was
     oklch(0.86 0.05 18)). --blush-light is the paler fill some pages derive. */
  --blush: var(--wine-tint);
  --blush-light: #FBF3F6;
  --pink-ink: var(--wine-hover);
  /* The homepage's sticky "next game" bar keeps its plum (owner, 2026-10-18). */
  --plum: #8C3050;

  /* The accent: buttons, links, ticks, selected states, menu bar and footer
     (owner, 2026-11-10). --wine-rgb is for glows: rgb(var(--wine-rgb) / 0.25). */
  --wine: #A8245A;
  --wine-hover: #8E1D4B;
  --wine-tint: #F6E6EC;
  --wine-rgb: 168 36 90;

  /* Headings: Cardo (owner, 2026-11-10: kept). --display and --quote are aliases
     for pages that name the heading or quote face. */
  --serif: 'Cardo', Georgia, serif;
  --display: var(--serif);
  --quote: var(--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-brand: var(--wine);
  --color-brand-hover: var(--wine-hover);
  --color-brand-dark: var(--wine-hover);
  --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);
  --color-accent: var(--wine);
  --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);

  /* Tailwind's strong pinks (text-pink-700, bg-pink-600, ...) are brand-pink
     accents on customer pages, so they move to the wine family too; the pale
     ones (bg-pink-50/100 fills) are the wine tint. */
  --color-pink-50: #FBF3F6;
  --color-pink-100: var(--wine-tint);
  --color-pink-200: #EDCCD9;
  --color-pink-300: #DFA3BB;
  --color-pink-400: #C25A85;
  --color-pink-500: #B23466;
  --color-pink-600: var(--wine);
  --color-pink-700: var(--wine-hover);
  --color-pink-800: #741A3F;
  --color-pink-900: #5C1633;
}

/* 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);
}

/* Card and button shapes (owner, 2026-11-10): cards get rounder corners, a thin
   line-coloured border and no drop shadow; brand buttons become pills. Pages built
   from Tailwind utilities pick these up without markup changes. Unlayered, so they
   beat the utilities; pages that draw their own cards with their own classes are
   not matched at all.

   A "card" is a white/paper box with a plain rounded corner and a shadow, e.g.
   "bg-white rounded-lg shadow-md". Floating things (absolute/fixed: dropdowns,
   modals, toasts) keep their shadow, and form controls and brand buttons are left
   to the button rule below. */
:root { --radius-card: 20px; --radius-pill: 999px; }

.card,
:is([class*="bg-white"], [class*="bg-surface-card"]):is([class~="rounded"], [class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):is([class*="shadow-sm"], [class*="shadow-md"], [class*="shadow-lg"], [class*="shadow-xl"], [class~="shadow"]):not([class*="absolute"], [class*="fixed"]):not(button, input, select, textarea, a[class*="brand"]) {
  border-radius: var(--radius-card);
  box-shadow: none;
}
.card:not([class*="border"]),
:is([class*="bg-white"], [class*="bg-surface-card"]):is([class~="rounded"], [class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):is([class*="shadow-sm"], [class*="shadow-md"], [class*="shadow-lg"], [class*="shadow-xl"], [class~="shadow"]):not([class*="absolute"], [class*="fixed"]):not(button, input, select, textarea, a[class*="brand"]):not([class*="border"]) {
  border: 1px solid var(--line);
}

/* A "brand button" is a link/button/submit with a brand (or wine pink) fill or
   border and a plain rounded corner: ButtonHelper's primary/secondary/ghost and
   the ad-hoc "bg-brand ... rounded-md" buttons. Partial roundings (rounded-t-*,
   rounded-l-*: segmented controls) and rounded-none are not matched. */
:is(a, button, input[type="submit"], input[type="button"]):is([class*="bg-brand"], [class*="border-brand"], [class*="bg-pink-6"], [class*="bg-pink-7"]):is([class~="rounded"], [class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"], [class*="rounded-["]) {
  border-radius: var(--radius-pill);
}

/* 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; }
}