/* Tokens do sistema visual (SPEC 6.3), com os valores do protótipo. O único sítio onde se
   escrevem cores, espaçamentos, raios e durações — os outros ficheiros só usam var(--…).

   Tema: <html data-theme="light|dark|auto"> (preferência da conta; claro por omissão; `auto`
   segue o sistema). Paleta para daltonismo: <html data-palette="colorblind">. A cor do clube
   (--club) chega por /club.css e serve só para identidade: nunca para estados, botões ou
   gráficos. */

:root {
    color-scheme: light;

    /* Superfícies e texto */
    --bg: #f8fafc;
    --surface: rgba(255, 255, 255, 0.74);
    --surface2: rgba(255, 255, 255, 0.95);
    --surface-solid: #ffffff;
    --border: rgba(255, 255, 255, 0.95);
    --side: rgba(255, 255, 255, 0.72);
    --ink: #0f172a;
    --ink2: #334155;
    --muted: #5b6678;
    --faint: #94a3b8;
    --line: rgba(15, 23, 42, 0.09);
    --line2: rgba(15, 23, 42, 0.05);
    --track: rgba(15, 23, 42, 0.08);
    --scrim: rgba(15, 19, 54, 0.35);

    /* Cor da app */
    --accent: #4f5bd5;
    --accent2: #5b67dd;
    --accent-ink: #2e3a9e;
    --accent-soft: #eef0fc;
    --on-accent: #ffffff;

    /* Estados e semáforo — sempre acompanhados de número, palavra ou ícone */
    --ok: #16a34a;
    --ok-soft: #dcfce7;
    --ok-ink: #166534;
    --mid: #d97706;
    --mid-soft: #fef3c7;
    --mid-ink: #92400e;
    --low: #dc2626;
    --low-soft: #fee2e2;
    --low-ink: #991b1b;

    /* Escala 1–5 */
    --scale-1: #dc2626;
    --scale-2: #f97316;
    --scale-3: #facc15;
    --scale-4: #84cc16;
    --scale-5: #16a34a;
    --ink-on-scale: #0f172a;
    --face-ink: #1b2150;

    /* Categorias (classes, linhas por atleta) */
    --cat-1: #0072b2;
    --cat-2: #e69f00;
    --cat-3: #cc79a7;
    --cat-4: #56b4e9;
    --cat-5: #7b61ff;
    --cat-6: #8c8c8c;

    /* Identidade do clube (substituída por /club.css) */
    --club: #3b48a6;

    /* Brilhos do fundo: cor da app, cinza e um toque da cor do clube */
    --glow1: rgba(79, 91, 213, 0.09);
    --glow2: rgba(148, 163, 184, 0.12);
    --glow3: color-mix(in srgb, var(--club) 9%, transparent);

    /* Tipografia */
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-text: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Espaçamento: escala de 4 px (SPEC 6.6) */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;

    /* Forma */
    --radius: 22px;
    --radius-md: 14px;
    --radius-sm: 12px;
    --shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(15, 23, 42, 0.05),
        0 16px 36px -24px rgba(15, 23, 42, 0.28);
    --shadow-pop: 0 30px 70px -20px rgba(15, 23, 42, 0.45), 0 0 0 1px var(--line);
    --shadow-accent: 0 8px 18px -10px rgba(67, 81, 189, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --blur: blur(18px) saturate(1.4);
    --touch: 44px;
    --touch-kiosk: 64px;

    /* Casca */
    --side-w: 252px;
    --side-w-rail: 78px;

    /* Movimento (SPEC 6.7) */
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 400ms;
    --ease-land: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Paleta para daltonismo (preferência pessoal): o "bom" passa de verde a azul */
:root[data-palette='colorblind'] {
    --scale-1: #d73027;
    --scale-2: #fc8d59;
    --scale-3: #fee090;
    --scale-4: #91bfdb;
    --scale-5: #4575b4;
    --ok: #4575b4;
    --ok-soft: #e0eaf6;
    --ok-ink: #26467a;
    --low: #d73027;
    --mid: #e8a33d;
}

/* Tema escuro: forçado (data-theme="dark") ou automático quando o sistema o pede. As duas
   regras têm de ficar iguais. */
:root[data-theme='dark'] {
    color-scheme: dark;
    --bg: #0b1120;
    --surface: rgba(255, 255, 255, 0.05);
    --surface2: rgba(255, 255, 255, 0.085);
    --surface-solid: #151c2e;
    --border: rgba(255, 255, 255, 0.08);
    --side: rgba(255, 255, 255, 0.035);
    --ink: #e2e8f0;
    --ink2: #cbd5e1;
    --muted: #94a3b8;
    --faint: #64748b;
    --line: rgba(255, 255, 255, 0.09);
    --line2: rgba(255, 255, 255, 0.05);
    --track: rgba(255, 255, 255, 0.1);
    --scrim: rgba(2, 6, 23, 0.6);
    --accent: #8b95f0;
    --accent2: #9ca5f3;
    --accent-ink: #c7ccff;
    --accent-soft: rgba(139, 149, 240, 0.16);
    --on-accent: #0b1120;
    --ok: #22c55e;
    --ok-soft: rgba(47, 158, 94, 0.2);
    --ok-ink: #8fe0af;
    --mid-soft: rgba(227, 155, 27, 0.2);
    --mid-ink: #ffd48a;
    --low-soft: rgba(229, 35, 43, 0.2);
    --low-ink: #ffb3b6;
    --glow1: rgba(139, 149, 240, 0.12);
    --glow2: rgba(148, 163, 184, 0.05);
    --glow3: color-mix(in srgb, var(--club) 12%, transparent);
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
    --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
    --shadow-accent: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme='auto'] {
        color-scheme: dark;
        --bg: #0b1120;
        --surface: rgba(255, 255, 255, 0.05);
        --surface2: rgba(255, 255, 255, 0.085);
        --surface-solid: #151c2e;
        --border: rgba(255, 255, 255, 0.08);
        --side: rgba(255, 255, 255, 0.035);
        --ink: #e2e8f0;
        --ink2: #cbd5e1;
        --muted: #94a3b8;
        --faint: #64748b;
        --line: rgba(255, 255, 255, 0.09);
        --line2: rgba(255, 255, 255, 0.05);
        --track: rgba(255, 255, 255, 0.1);
        --scrim: rgba(2, 6, 23, 0.6);
        --accent: #8b95f0;
        --accent2: #9ca5f3;
        --accent-ink: #c7ccff;
        --accent-soft: rgba(139, 149, 240, 0.16);
        --on-accent: #0b1120;
        --ok: #22c55e;
        --ok-soft: rgba(47, 158, 94, 0.2);
        --ok-ink: #8fe0af;
        --mid-soft: rgba(227, 155, 27, 0.2);
        --mid-ink: #ffd48a;
        --low-soft: rgba(229, 35, 43, 0.2);
        --low-ink: #ffb3b6;
        --glow1: rgba(139, 149, 240, 0.12);
        --glow2: rgba(148, 163, 184, 0.05);
        --glow3: color-mix(in srgb, var(--club) 12%, transparent);
        --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
        --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
        --shadow-accent: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    }
}