/*
 * 30 Second Genius — the app's palette A2 and fonts for the game pages (4d).
 * Made by scripts/make-games-theme.mjs from src/ui/theme.css: do not edit by hand.
 */
:root,
:host {
  --color-page: #F4F1EA;
  --color-card: #FFFFFF;
  --color-rule: #D9D2C3;
  --color-control: #857C6C;
  --color-primary: #BB3D3F;
  --color-text: #0A1B1C;
  --color-muted: #4B5557;
  --color-ok: #235915;
  --color-ok-bg: #E5F0E1;
  --color-highlight: #FFE27A;
  --color-deep: #762E30;
  --font-serif: ui-serif, 'New York', Georgia, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* The Tailwind colors of the prebuilt game styles, pointed at the tokens. */
  --color-white: var(--color-card);
  --color-black: var(--color-text);
  --color-slate-50: var(--color-page);
  --color-slate-100: var(--color-page);
  --color-slate-200: var(--color-rule);
  --color-slate-300: var(--color-control);
  --color-slate-500: var(--color-muted);
  --color-slate-600: var(--color-muted);
  --color-slate-700: var(--color-text);
  --color-slate-800: var(--color-text);
  --color-slate-900: var(--color-text);
  --color-slate-950: var(--color-text);
  --color-emerald-700: var(--color-primary);
  --color-emerald-800: var(--color-deep);
  --color-emerald-600: var(--color-primary);
  --color-emerald-950: var(--color-text);
  --color-emerald-100: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  --color-emerald-200: color-mix(in srgb, var(--color-primary) 25%, var(--color-card));
  --color-emerald-300: color-mix(in srgb, var(--color-primary) 35%, var(--color-card));
  --color-emerald-50: var(--color-ok-bg);
  --color-emerald-500: var(--color-ok);
  --color-indigo-100: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  --color-indigo-200: color-mix(in srgb, var(--color-primary) 25%, var(--color-card));
  --color-indigo-600: var(--color-primary);
  --color-indigo-700: var(--color-primary);
  --color-indigo-800: var(--color-deep);
  --color-amber-100: var(--color-highlight);
  --color-amber-200: var(--color-highlight);
  --color-amber-400: var(--color-highlight);
  --color-sky-100: var(--color-page);
  --color-sky-500: var(--color-primary);
  --color-red-700: var(--color-primary);
}