/* Let It Ride: casino red. A warm cream ground, a red-black ink, and a red gradient on the main buttons (white text
   on it); the dark tables are red felt, gold is for coins and wins, and headline words on the felt are gold. Headline
   words on a light ground use the darker --grad-text so they stay readable. Every colour, font, radius and easing the
   site uses is a token here; base.css, house.css and pages.css only read them. */
:root {
  color-scheme: light;

  --bg: #F7F1EC;
  --bg-2: #F0E6E0;
  --surface: #FFFFFF;
  --surface-2: #EFE5DF;

  --line: rgba(26, 10, 13, 0.08);
  --line-2: rgba(26, 10, 13, 0.14);

  --ink: #1A0A0D;
  --ink-2: #3D2328;
  --muted: #6E5A5D;
  --dim: #A8979A;

  /* the names stay from CasinoPad's file; the colours are Let It Ride's own */
  --pk: #E3172F;            /* casino red: red pockets, losses, picks */
  --mg: #FFC94D;            /* gold: highlights on the felt and on ink */
  --pu: #B80F25;            /* deep red: links and labels on the light ground */
  --grad: linear-gradient(120deg, #C20F27 0%, #E8192F 55%, #FF4A3D 100%);
  --grad-text: linear-gradient(120deg, #9E0C1F 0%, #C8102E 55%, #E0351F 100%);
  --grad-hi: linear-gradient(120deg, #FFE08A 0%, #FFC94D 50%, #FFA93D 100%);   /* gold: words and wins on the felt */
  --felt: #4A0B15;          /* the dark tables: the hero floor, coin cards, the closing panel */
  --accent: #E3172F;
  --accent-2: #B80F25;
  --on-accent: #FFFFFF;
  --gold: #FFC23D;

  --good: #A86A00;          /* wins: dark gold, readable on cream */
  --bad: #E3172F;
  --warn: #B7791F;

  --font-display: "Sora", "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.045em;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 0 0 1px var(--line), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 28px 56px -40px rgba(40, 8, 14, 0.45);
  --shadow-2: 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(40, 8, 14, 0.55);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 160ms;
  --t: 300ms;

  --wrap: 1300px;
  --gut: 24px;
  --top-h: 68px;
}