/* ==========================================================================
   Round 3 Studios — design tokens
   Single source of truth for colour, type, spacing and motion. Mirrors the
   design canvas; change here, not in component files.
   ========================================================================== */

:root {
  /* Brand */
  --ink: #141414;
  --ink-2: #1a1a1b;
  --ink-3: #0f0f10;
  --line: #2a292c;
  --line-2: #38363a;
  --line-3: #4a484d;
  --text: #e6e7e8;
  --text-2: #a7a6aa;
  --text-3: #8a8990;
  --text-4: #8b8a90;       /* dimmest text; ≥ 4.5:1 on every dark surface (WCAG AA) */
  --red: #ed1d2b;          /* brand red: fills, borders, glows */
  --red-ui: #e31b29;       /* filled buttons: white label at 4.7:1 */
  --red-text: #ff3341;     /* red text on dark: 4.8:1 and up */
  --red-dark: #c9121f;
  --red-glow: rgba(237, 29, 43, 0.35);
  --red-glow-soft: rgba(237, 29, 43, 0.18);

  /* Monster Lab Simulator palette (game pages only) */
  --mls-navy: #0b2229;
  --mls-navy-2: #0d2a30;
  --mls-line: #163b45;
  --mls-teal: #7fe3c9;
  --mls-peach: #ffb48a;
  --mls-pink: #ff7e8e;
  --mls-gold: #ffd23f;
  --mls-cream: #fff4d6;
  --mls-lilac: #b9a2f0;
  --mls-muted: #b7c9cc;

  /* Type */
  --font-sans: "Geologica", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: 96px;
  --fs-h2: 40px;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-mono: 12px;
  --track-mono: 0.16em;

  /* Layout — the design is drawn at 1440; wider screens get more side room, not wider content */
  --page-max: 1440px;
  --gutter: 80px;
  --sec-y: 96px;

  /* Controls */
  --btn-h: 52px;
  --chip-h: 32px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.18s;
  --t-med: 0.25s;
}

@media (min-width: 1441px) {
  :root {
    --edge: 80px;                                               /* nav stays at the screen edges */
    --gutter: calc((100vw - var(--page-max)) / 2 + var(--edge)); /* content stays on the 1440 column */
  }
}

@media (max-width: 1200px) {
  :root {
    --gutter: 48px;
    --fs-h1: 80px;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 32px;
    --sec-y: 64px;
    --fs-h1: 64px;
    --fs-h2: 34px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --sec-y: 48px;
    --fs-h1: 44px;
    --fs-h2: 26px;
    --fs-lead: 16px;
    --btn-h: 46px;
    --chip-h: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-med: 0s;
  }
}