@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* games.myc.li shared design tokens (canonical copy). One data-theme
   attribute re-skins every structural color; identity/accent colors are
   per-game. Type + rhythm are theme-independent. */

:root {
  /* type families */
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* type scale */
  --fs-display: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);
  --fs-h2: 1rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;
  --fs-stat: 1.375rem;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* shape + motion */
  --t-radius: 6px;
  --t-radius-sm: 4px;
  --t-speed: 140ms;

  /* light (default) */
  color-scheme: light;
  --t-bg: #f4f4f0;
  --t-panel: #fbfbf8;
  --t-panel-deep: #ecece6;
  --t-ink: #171715;
  --t-muted: #62635c;
  --t-dim: #6a6b64;
  --t-line: #e2e2db;
  --t-line-strong: #71716a;
  --t-accent: #b9ea62;
  --t-on-accent: #171715;
  --t-accent-ink: #577a10;
  --t-success: #4d6b16;
  --t-warn: #7a4a09;
  --t-danger: #b23b32;
  --t-scrim: rgb(23 23 21 / 50%);
  --t-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 12px 32px rgb(0 0 0 / 7%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #10100f;
  --t-panel: #181817;
  --t-panel-deep: #131412;
  --t-ink: #f1efe8;
  --t-muted: #9c9a91;
  --t-dim: #8a887f;
  --t-line: #2c2c29;
  --t-line-strong: #7a7a72;
  --t-accent: #b9ea62;
  --t-on-accent: #171715;
  --t-accent-ink: #b9ea62;
  --t-success: #b7d97c;
  --t-warn: #d9a95c;
  --t-danger: #e28b83;
  --t-scrim: rgb(5 6 8 / 86%);
  --t-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px rgb(0 0 0 / 45%);
}

html[data-theme="light"] {
  color-scheme: light;
  --t-bg: #f4f4f0;
  --t-panel: #fbfbf8;
  --t-panel-deep: #ecece6;
  --t-ink: #171715;
  --t-muted: #62635c;
  --t-dim: #6a6b64;
  --t-line: #e2e2db;
  --t-line-strong: #71716a;
  --t-accent: #b9ea62;
  --t-on-accent: #171715;
  --t-accent-ink: #577a10;
  --t-success: #4d6b16;
  --t-warn: #7a4a09;
  --t-danger: #b23b32;
  --t-scrim: rgb(23 23 21 / 50%);
  --t-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 12px 32px rgb(0 0 0 / 7%);
}

:root, html[data-theme="light"], html[data-theme="dark"] {
  transition: background-color var(--t-speed) ease, color var(--t-speed) ease;
}