/* Math Memory Match: shared design tokens and brand pieces for every page.
   Colors come from two palette hues (--h, --h2) and a chroma (--c), set by data-palette on <html>.
   Light values are on :root; dark values are repeated for the system setting and the toggle. */
:root {
  --h: 232; --h2: 192; --c: 0.15;           /* palette hues, set by data-palette */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --bg: oklch(97% 0.014 var(--h));
  --surface: oklch(99.5% 0.004 var(--h));
  --surface-2: oklch(93.5% 0.022 var(--h));
  --fg: oklch(24% 0.035 var(--h));
  --muted: oklch(47% 0.035 var(--h));
  --line: oklch(87% 0.025 var(--h));
  --accent: oklch(52% var(--c) var(--h));
  --accent-fg: oklch(99% 0 0);
  --back-1: oklch(60% var(--c) var(--h));
  --back-2: oklch(50% var(--c) var(--h2));
  --on-back: oklch(100% 0 0);
  --match: oklch(94% 0.055 160);
  --match-line: oklch(56% 0.13 160);
  --match-fg: oklch(38% 0.09 160);
  --miss: oklch(58% 0.2 25);
  --miss-bg: oklch(95% 0.035 25);
  --team-a: oklch(55% 0.17 var(--h));
  --team-b: oklch(60% 0.17 calc(var(--h) + 150));
  --star: oklch(78% 0.16 80);
  --gold: #F2B632;
  --card-ink: #13283A;
  --logo-accent: oklch(50% var(--c) var(--h));
  --shadow: 0 1px 2px oklch(30% 0.05 var(--h) / .14), 0 4px 14px oklch(30% 0.05 var(--h) / .12);
  --scrim: oklch(20% 0.03 var(--h) / .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(18.5% 0.022 var(--h));
    --surface: oklch(25% 0.028 var(--h));
    --surface-2: oklch(29% 0.032 var(--h));
    --fg: oklch(95% 0.012 var(--h));
    --muted: oklch(73% 0.03 var(--h));
    --line: oklch(36% 0.035 var(--h));
    --accent: oklch(74% var(--c) var(--h));
    --accent-fg: oklch(18% 0.03 var(--h));
    --back-1: oklch(56% var(--c) var(--h));
    --back-2: oklch(44% var(--c) var(--h2));
    --match: oklch(31% 0.06 160);
    --match-line: oklch(70% 0.14 160);
    --match-fg: oklch(88% 0.08 160);
    --miss: oklch(68% 0.19 25);
    --miss-bg: oklch(30% 0.06 25);
    --team-a: oklch(72% 0.15 var(--h));
    --team-b: oklch(76% 0.15 calc(var(--h) + 150));
    --shadow: 0 1px 2px oklch(0% 0 0 / .4), 0 6px 18px oklch(0% 0 0 / .35);
    --scrim: oklch(5% 0.02 var(--h) / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(18.5% 0.022 var(--h));
  --surface: oklch(25% 0.028 var(--h));
  --surface-2: oklch(29% 0.032 var(--h));
  --fg: oklch(95% 0.012 var(--h));
  --muted: oklch(73% 0.03 var(--h));
  --line: oklch(36% 0.035 var(--h));
  --accent: oklch(74% var(--c) var(--h));
  --accent-fg: oklch(18% 0.03 var(--h));
  --back-1: oklch(56% var(--c) var(--h));
  --back-2: oklch(44% var(--c) var(--h2));
  --match: oklch(31% 0.06 160);
  --match-line: oklch(70% 0.14 160);
  --match-fg: oklch(88% 0.08 160);
  --miss: oklch(68% 0.19 25);
  --miss-bg: oklch(30% 0.06 25);
  --team-a: oklch(72% 0.15 var(--h));
  --team-b: oklch(76% 0.15 calc(var(--h) + 150));
  --shadow: 0 1px 2px oklch(0% 0 0 / .4), 0 6px 18px oklch(0% 0 0 / .35);
  --scrim: oklch(5% 0.02 var(--h) / .6);
  color-scheme: dark;
}
/* Color schemes: each sets two hues and a chroma; every color token above derives from them */
:root[data-palette="ocean"]  { --h: 232; --h2: 192; --c: 0.15; }
:root[data-palette="sunset"] { --h: 32;  --h2: 355; --c: 0.16; }
:root[data-palette="forest"] { --h: 150; --h2: 115; --c: 0.12; }
:root[data-palette="grape"]  { --h: 305; --h2: 268; --c: 0.15; }
:root[data-palette="citrus"] { --h: 80;  --h2: 45;  --c: 0.14; }
:root[data-palette="slate"]  { --h: 250; --h2: 220; --c: 0.04; }


html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }

/* Brand: logo mark (inline SVG) and the tiled-M wordmark */
.mm-mark { display: block; flex: none; }
.mm-word { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .32em; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1; color: var(--fg); }
.mm-word > span { display: inline-flex; align-items: center; gap: .08em; }
.mm-tile { display: inline-flex; align-items: center; justify-content: center; width: 1.04em; height: 1.12em; border-radius: .2em; background: linear-gradient(140deg, var(--back-1), var(--back-2)); color: #FFFFFF; font-style: normal; font-weight: 800; font-size: .8em; }
.mm-tile.up { background: #FFFFFF; color: var(--card-ink); box-shadow: inset 0 0 0 .1em var(--gold); }
.mm-word.stack { flex-direction: column; align-items: flex-start; gap: .14em; }