/* Design tokens (decision 49: "Mokiz Soft", a calm look in the spirit of Tailwind + daisyUI; it replaces the loud
   3D "live game" look of decision 40). Flat colors on a warm light base, white cards with a thin border and a soft
   shadow, rounded corners, medium weights. Game colors (answer tiles, teams) stay, just calmer.
   Font: Prompt (SIL OFL, self-hosted in assets/fonts). */
@font-face { font-family: "Prompt"; font-weight: 400; font-display: swap; src: url(/assets/fonts/prompt-400-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-weight: 400; font-display: swap; src: url(/assets/fonts/prompt-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-weight: 600; font-display: swap; src: url(/assets/fonts/prompt-600-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-weight: 600; font-display: swap; src: url(/assets/fonts/prompt-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-weight: 800; font-display: swap; src: url(/assets/fonts/prompt-800-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-weight: 800; font-display: swap; src: url(/assets/fonts/prompt-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  /* brand + semantic colors (daisyUI names in comments) */
  --c-orange: #f97316;      /* primary */
  --c-orange-700: #c2410c;
  --c-orange-100: #ffedd5;
  --c-purple: #6366f1;      /* secondary */
  --c-purple-700: #4338ca;
  --c-purple-900: #1e1b4b;
  --c-pink: #ec4899;
  --c-teal: #14b8a6;        /* accent */
  --c-teal-700: #0f766e;
  --c-amber: #f59e0b;
  --c-coral: #f43f5e;
  --c-coral-700: #be123c;
  --c-blue: #3b82f6;
  --c-ink: #1f2430;         /* neutral */
  --c-cream: #fdf8f3;

  /* the page: one warm light base, no gradients */
  --bg-grad: none;
  --bg-dots: none;
  --bg: #f6f4f1;            /* base-200 */
  --on-bg: #1f2430;         /* text placed straight on the page */
  --on-bg-muted: #6b7280;

  --surface: #ffffff;       /* base-100 */
  --surface-2: #f6f4f1;     /* base-200 */
  --surface-3: #eef0ff;     /* a soft secondary tint */
  --text: #1f2430;          /* base-content */
  --text-muted: #6b7280;
  --border: #e7e3de;        /* base-300 */
  --border-strong: #d6d1ca;
  --ok: #15803d;
  --ok-bg: #22c55e;
  --ok-soft: #dcfce7;
  --bad: #dc2626;
  --bad-bg: #ef4444;
  --bad-soft: #fee2e2;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --focus: #f97316;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-3: 0 10px 30px rgba(16, 24, 40, 0.12);
  --depth: 0 0 0; /* the old 3D edge, now flat (kept so older rules resolve) */

  --font: "Prompt", "Noto Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: 1.6rem;
  --fs-4: 2.25rem;
  --w-strong: 600;          /* headings, buttons, names */
  --w-heavy: 800;           /* only big numbers (PIN, countdown, scores) */

  --dur: 160ms;
  --blur: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15191e;
    --on-bg: #e5e7eb;
    --on-bg-muted: #9ca3af;
    --surface: #1d232a;
    --surface-2: #242b33;
    --surface-3: #262a45;
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --border: #2f3740;
    --border-strong: #3b4450;
    --ok: #4ade80;
    --ok-soft: #14321f;
    --bad: #f87171;
    --bad-soft: #3a1717;
    --warn: #fbbf24;
    --warn-soft: #3a2e10;
    --c-orange-100: #3a2413;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15191e;
  --on-bg: #e5e7eb;
  --on-bg-muted: #9ca3af;
  --surface: #1d232a;
  --surface-2: #242b33;
  --surface-3: #262a45;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --border: #2f3740;
  --border-strong: #3b4450;
  --ok: #4ade80;
  --ok-soft: #14321f;
  --bad: #f87171;
  --bad-soft: #3a1717;
  --warn: #fbbf24;
  --warn-soft: #3a2e10;
  --c-orange-100: #3a2413;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Quality tiers are set on <html data-q="low|mid|high"> by quality-manager.js */
html[data-q="low"] {
  --dur: 0ms;
  --blur: 0px;
  --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.08);
}
html[data-q="mid"] { --dur: 120ms; }
html[data-q="high"] { --dur: 180ms; }
html[data-motion="reduced"] { --dur: 0ms; }
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}