/* ============================================================
   Connect the Thoughts — design tokens (shared)
   Source of truth for all games in the arcade. Each game vendors
   a copy of this file into its own repo so it can deploy
   independently. To bump the brand, update here and re-vendor.

   How each game uses it:
     1. <link rel="stylesheet" href="tokens.css"> before any other CSS
        (or @import "./tokens.css" at the top of the main stylesheet)
     2. Set --accent to the game's tone:
          :root { --accent: var(--tone-grass-fg); }
          [data-theme="dark"] { --accent: var(--tone-grass-fg); }
        Game tone assignments (match the launcher cards):
          connect-the-thoughts → emerald
          Cornerstone          → amber
          turn-based-soccer    → grass
          math-hurdles         → sky
          dot-to-dot           → rose
     3. Wire arcade.js for theme bootstrap + persistence
        (key: localStorage["ctt.theme"] = "light" | "dark")
   ============================================================ */

:root {
    --bg: #f8fafc;
    --bg-elev: #ffffff;
    --fg: #0f172a;
    --fg-muted: #475569;
    --fg-subtle: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --accent: #0f766e;
    --accent-hover: #115e59;
    --focus: #2563eb;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Per-game tones */
    --tone-emerald-bg: #ecfdf5;
    --tone-emerald-fg: #047857;
    --tone-amber-bg: #fffbeb;
    --tone-amber-fg: #b45309;
    --tone-grass-bg: #f0fdf4;
    --tone-grass-fg: #15803d;
    --tone-sky-bg: #eff6ff;
    --tone-sky-fg: #1d4ed8;
    --tone-rose-bg: #fff1f2;
    --tone-rose-fg: #be123c;

    /* Type scale (use clamp() for fluid sizing where you need it) */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
    --bg: #0b1120;
    --bg-elev: #131b2e;
    --fg: #e2e8f0;
    --fg-muted: #94a3b8;
    --fg-subtle: #64748b;
    --border: #1e293b;
    --border-strong: #334155;
    --accent: #5eead4;
    --accent-hover: #2dd4bf;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    --tone-emerald-bg: #022c22;
    --tone-emerald-fg: #6ee7b7;
    --tone-amber-bg: #2a1a04;
    --tone-amber-fg: #fcd34d;
    --tone-grass-bg: #052e16;
    --tone-grass-fg: #86efac;
    --tone-sky-bg: #0c1e3c;
    --tone-sky-fg: #93c5fd;
    --tone-rose-bg: #2a0a13;
    --tone-rose-fg: #fda4af;
}