/* ==========================================================================
   CHORHAUS v2 — DESIGN TOKENS (SINGLE SOURCE OF TRUTH)

   Every stylesheet in this project — app and marketing alike — reads its
   colour, type, spacing and motion values from here. Do not redeclare any of
   these in another file: a second copy is a second brand, and they drift.

   Values are the canonical ChorHaus v2 brand kit. Change them here, once.
   ========================================================================== */

:root {
    /* --- Typography --- */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* Condensed poster face for mastheads and headings. Names a real narrow
       face per platform so it never silently falls back to a regular width. */
    --font-display: "Haettenschweiler", "Arial Narrow", "Liberation Sans Narrow",
                    "DejaVu Sans Condensed", "Noto Sans Display", Impact,
                    "Franklin Gothic Medium", sans-serif;

    /* --- Colour: floodlit night field ---------------------------------------
       ChorHaus is a league. The palette is a municipal pitch under floodlights
       crossed with the colour vocabulary of cleaning chemistry.

       One hue, one job. The previous palette had #f59e0b serving as brand
       accent, warning state, first-place gold AND the CTA gradient, with
       #b45309 -- a genuine brown -- as its shadow stop. A hue meaning four
       things reads as mud, and gold that appears on every button stops meaning
       victory. Each job now owns a colour, and gold is spent only on winning.
       ---------------------------------------------------------------------- */
    --color-bg-deep: #080b12;        /* Night field */
    --color-bg-surface: #121826;     /* Card & component surface */
    --color-bg-elevated: #1a2336;    /* Active inputs & dialogs */
    --color-line: #22304a;           /* Hairline rules and card edges */

    --color-text-primary: #f2f6fb;
    --color-text-secondary: #93a3bd;
    --color-text-disabled: #55657f;

    /* Chlorine. Every action, every affirmative state. Green-cyan reads as
       disinfected-clean and as scoreboard LED at the same time, which is the
       whole product in one colour. */
    --color-primary: #35e0a1;
    --color-primary-hot: #6bf5c0;    /* Hover / glow */
    --color-primary-deep: #0f7a55;   /* Pressed, and the only gradient stop */
    --color-on-primary: #041711;     /* Text on a chlorine fill */

    /* Floodlight. First place only. If this appears anywhere that is not a
       crown, a rank-1 row or a banked win, it is a bug. */
    --color-accent-gold: #ffd046;
    --color-gold-hot: #ffe38a;

    --color-success-mint: #35e0a1;   /* Same as primary: clean IS the success */
    --color-warning-amber: #ff9f43;  /* Caution. No longer shares with gold. */
    --color-danger-crimson: #ff4d4d;
    --color-danger-soft: #ffb3b3;

    /* Legacy aliases. Older rules still name these; they now resolve to the
       new system instead of the brown. Do not use them in new code. */
    --color-gold-deep: #0f7a55;

    /* --- Spacing (8px base) --- */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3.5rem;
    --space-3xl: 6rem;

    /* --- Ergonomics --- */
    --touch-target-min: 48px;        /* Strictly enforced mobile touch minimum */
    --measure: 66ch;                 /* Comfortable reading width */
    --shell-max: 1080px;             /* Marketing content width */

    /* --- Radii --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-round: 9999px;

    /* --- Elevation --- */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-glow-gold: 0 0 15px rgba(245, 158, 11, 0.3);
    --shadow-glow-success: 0 0 15px rgba(16, 185, 129, 0.3);

    /* --- Motion --- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   APP THEME SKINS (ported from ChorHaus v1 index.html themes)
   Applied as body.theme-* — remaps the same token names the rest of the app uses.
   ========================================================================== */

/* Default / Obsidian is :root above. Also register as theme-obsidian for the picker. */
body.theme-obsidian {
    /* same as :root -- explicit for the picker label */
}

/* Every theme must set the FULL action set, not just --color-primary:
   *-hot (hover), *-deep (pressed), and --color-on-primary (text on the fill).
   Without on-primary a button inherits obsidian's dark green, which lands as
   green text on hot pink.

   --color-accent-gold must also stay distinct from --color-primary. Cyber,
   Barbie and Babyblue previously set them identical, which made "gold means
   first place" invisible -- the crown was the same colour as every button.

   Contrast of on-primary against its fill is checked to WCAG AA (4.5:1) for
   each theme. Rank 1 additionally carries a crown glyph, so first place is
   never signalled by colour alone. */

/* Slate -- v1 default slate board */
body.theme-slate {
    --color-bg-deep: #0f172a;
    --color-bg-surface: #1e293b;
    --color-bg-elevated: #334155;
    --color-line: #3d4d66;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-text-disabled: #64748b;
    --color-primary: #3b82f6;        /* 4.96:1 with on-primary */
    --color-primary-hot: #60a5fa;
    --color-primary-deep: #1d4ed8;
    --color-on-primary: #06152c;
    --color-accent-gold: #ffd046;
    --color-gold-hot: #ffe38a;
    --color-gold-deep: #1d4ed8;
    --color-success-mint: #10b981;
    --color-warning-amber: #ff9f43;
    --color-danger-crimson: #ef4444;
    --shadow-glow-gold: 0 0 15px rgba(255, 208, 70, 0.3);
}

/* Nordic Forest */
body.theme-forest {
    --color-bg-deep: #14251c;
    --color-bg-surface: #1b3528;
    --color-bg-elevated: #2a4c3a;
    --color-line: #33604a;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #a7f3d0;
    --color-text-disabled: #6b9b80;
    --color-primary: #34d399;        /* 8.50:1 */
    --color-primary-hot: #6ee7b7;
    --color-primary-deep: #059669;
    --color-on-primary: #04251a;
    --color-accent-gold: #fde047;
    --color-gold-hot: #fef08a;
    --color-gold-deep: #059669;
    --color-success-mint: #34d399;
    --color-warning-amber: #fb923c;
    --color-danger-crimson: #f87171;
    --shadow-glow-gold: 0 0 18px rgba(253, 224, 71, 0.3);
    --shadow-glow-success: 0 0 15px rgba(52, 211, 153, 0.35);
}

/* Cyber Minimal */
body.theme-cyber {
    --color-bg-deep: #000000;
    --color-bg-surface: #121212;
    --color-bg-elevated: #2e2e2e;
    --color-line: #333333;
    --color-text-primary: #ffffff;
    --color-text-secondary: #8e8e8e;
    --color-text-disabled: #5a5a5a;
    --color-primary: #00f0ff;        /* 13.41:1 */
    --color-primary-hot: #6bf6ff;
    --color-primary-deep: #0891b2;
    --color-on-primary: #001416;
    /* Gold was cyan here, so nothing marked a win. Warm gold against neon cyan
       is the sharpest hue separation available on pure black. */
    --color-accent-gold: #ffd046;
    --color-gold-hot: #ffe38a;
    --color-gold-deep: #0891b2;
    --color-success-mint: #39ff14;
    --color-warning-amber: #ffb700;
    --color-danger-crimson: #ff0033;
    --shadow-glow-gold: 0 0 16px rgba(255, 208, 70, 0.35);
    --shadow-glow-success: 0 0 16px rgba(57, 255, 20, 0.3);
}

/* Barbie Pink */
body.theme-barbie {
    --color-bg-deep: #2e081c;
    --color-bg-surface: #4c1032;
    --color-bg-elevated: #7c1a53;
    --color-line: #8d2461;
    --color-text-primary: #fff0f5;
    --color-text-secondary: #f4b3da;
    --color-text-disabled: #c47aa5;
    --color-primary: #ff409f;        /* 5.68:1 */
    --color-primary-hot: #ff73c2;
    --color-primary-deep: #be185d;
    --color-on-primary: #2b0618;
    --color-accent-gold: #ffd046;    /* pink and gold is a real pairing */
    --color-gold-hot: #ffe38a;
    --color-gold-deep: #be185d;
    --color-success-mint: #10b981;
    --color-warning-amber: #fb923c;
    --color-danger-crimson: #ef4444;
    --shadow-glow-gold: 0 0 18px rgba(255, 208, 70, 0.3);
}

/* Baby Blue */
body.theme-babyblue {
    --color-bg-deep: #071d2c;
    --color-bg-surface: #0e2a3f;
    --color-bg-elevated: #1c4a63;
    --color-line: #245a78;
    --color-text-primary: #f0f8ff;
    --color-text-secondary: #a3cfed;
    --color-text-disabled: #5f8eab;
    --color-primary: #38bdf8;        /* 7.83:1 */
    --color-primary-hot: #7dd3fc;
    --color-primary-deep: #0369a1;
    --color-on-primary: #04202e;
    --color-accent-gold: #ffd046;
    --color-gold-hot: #ffe38a;
    --color-gold-deep: #0369a1;
    --color-success-mint: #10b981;
    --color-warning-amber: #fb923c;
    --color-danger-crimson: #ef4444;
    --shadow-glow-gold: 0 0 18px rgba(255, 208, 70, 0.3);
}