/* Madishan Games — design tokens v3 ("locked bright design", product brief v2 §4.2).
   Public site only. Light by design: system dark-mode preferences must not change these surfaces,
   so there is no prefers-color-scheme rule anywhere in the v3 stylesheets.
   Contrast (WCAG AA, checked in real states): text on page 9.2:1 · text on surface 9.7:1 · text on lilac 8.3:1
   · text on trays ≥ 8.7:1 · muted on page 5.7:1 · muted on lilac 5.1:1 · white on primary 6.4:1
   · indigo on lilac (selected pill) 5.5:1 · focus ring vs page 6.1:1 · error/success on white ≥ 6.5:1 */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-wght.v1.woff2") format("woff2-variations"),
    url("/fonts/nunito-sans-latin-wght.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Exact starting tokens (brief §4.2) */
  --page: #F4FAFF;
  --surface: #FFFFFF;
  --text: #34465A;
  --muted: #526579;
  --primary: #5546D9;
  --primary-hover: #4738C4;
  --primary-soft: #F0EAFF;
  --sky: #EAF5FF;
  --mint: #EAF8F1;
  --peach: #FFF0E5;
  --lemon: #FFF7D8;
  --border: #DCE6EF;
  --focus: #5546D9;
  --success: #216A4A;
  --error: #A33242;
  --radius-card: 24px;
  --radius-control: 14px;
  --shadow-card: 0 8px 24px rgb(68 100 132 / 7%);

  /* Derived (no new hues): the fifth tray, the subtle lilac line and the hover shadow */
  --lilac: var(--primary-soft);
  --primary-line: rgb(85 70 217 / 22%);
  --shadow-card-hover: 0 12px 28px rgb(68 100 132 / 12%);
  --on-primary: #FFFFFF;

  /* Type */
  --font: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale: 4 8 12 16 20 24 32 40 48 64 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout: 1184 px content, 16 / 24 / 32 px gutters (mobile / tablet / desktop) */
  --wrap: 1184px;
  --gutter: 16px;
}