/* Design tokens: the ONE place colours, type, spacing, radii and motion are defined.
   Light by default, dark follows the phone (and can be forced with data-theme). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #ececea;
  --surface-3: #e2e2df;
  --line: rgba(20, 20, 24, 0.08);
  --line-strong: rgba(20, 20, 24, 0.16);

  /* text */
  --text: #17171a;
  --text-2: #64646b;
  --text-3: #9a9aa1;

  /* action: ink buttons, no brand hue (the games own the colour) */
  --accent: #17171a;
  --on-accent: #ffffff;

  /* state */
  --good: #15803d;
  --good-bg: #dcf5e3;
  --bad: #c42b2b;
  --bad-bg: #fbe3e1;
  --turn: #2f6fed;          /* "your turn" dot */

  /* card game inks: blue / orange / ink, safe for red-green colour blindness */
  --card-face: #ffffff;
  --card-blue: #2563eb;
  --card-orange: #ea6a0c;
  --card-ink: #26262b;

  /* word game */
  --tile: #ffffff;
  --tile-text: #17171a;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 20px;
  --fs-xl: 28px;
  --fs-xxl: 40px;

  /* space (4 pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* shape */
  --r-s: 8px;
  --r: 14px;
  --r-l: 22px;
  --r-full: 999px;

  /* depth */
  --shadow-1: 0 1px 2px rgba(16, 16, 20, 0.05), 0 1px 1px rgba(16, 16, 20, 0.03);
  --shadow-2: 0 2px 4px rgba(16, 16, 20, 0.05), 0 8px 24px rgba(16, 16, 20, 0.08);
  --shadow-3: 0 12px 40px rgba(16, 16, 20, 0.18);

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* layout */
  --maxw: 560px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d0f;
    --surface: #18181b;
    --surface-2: #222226;
    --surface-3: #2c2c31;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #f3f3f4;
    --text-2: #a0a0a8;
    --text-3: #6c6c74;
    --accent: #f3f3f4;
    --on-accent: #111113;
    --good: #4ade80;
    --good-bg: #15301f;
    --bad: #f87171;
    --bad-bg: #3a1a1a;
    --turn: #6b9bff;
    --card-face: #1d1d21;
    --card-blue: #6b9bff;
    --card-orange: #ff9442;
    --card-ink: #e6e6ea;
    --tile: #1d1d21;
    --tile-text: #f3f3f4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0f;
  --surface: #18181b;
  --surface-2: #222226;
  --surface-3: #2c2c31;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f3f4;
  --text-2: #a0a0a8;
  --text-3: #6c6c74;
  --accent: #f3f3f4;
  --on-accent: #111113;
  --good: #4ade80;
  --good-bg: #15301f;
  --bad: #f87171;
  --bad-bg: #3a1a1a;
  --turn: #6b9bff;
  --card-face: #1d1d21;
  --card-blue: #6b9bff;
  --card-orange: #ff9442;
  --card-ink: #e6e6ea;
  --tile: #1d1d21;
  --tile-text: #f3f3f4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
}

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