/* ─── FXE Console — Design tokens (light + dark unificados) ────────────
   Carregado em base.html ANTES de style.css.
   Fonte unica de verdade. Light em :root; [data-theme="dark"] redefine.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Geometricos / tipograficos (tema-agnosticos) ───────────────────── */
:root {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ─── Largura util da pagina (`main`) ───────────────────────────────
       Mora AQUI, no bloco tema-agnostico, e nao em style.css: e um token
       GEOMETRICO — irmao de --space-* e --radius-* —, e o valor e o MESMO
       nos dois temas (nao ha bloco de largura sob [data-theme="dark"]).
       style.css so consome, como faz com o resto.

       `--largura-pagina` e o nivel EM VIGOR; o `<main>` le so ele. O default
       e `leitura` (o 1200px de sempre) e a classe `.largura-densa` no <main>
       troca o valor. Quem declara o nivel e a propria pagina, pelo
       `{% block largura %}` — ha guarda que reprova pagina sem declaracao
       (tests/unit/api/test_largura_pagina_declarada.py).

       🚨 O piso de `--largura-leitura` dentro do `max()` NAO e redundancia.
       O projeto e `box-sizing: border-box` e o `main` tem `padding: 0
       var(--space-8)` (32px de cada lado), entao o `min(...100vw - 64px)`
       sozinho, num viewport de 1024, daria `max-width: 960px` — MAIS
       ESTREITO que hoje, onde o `main` simplesmente preenche os 1024. O
       piso garante que o nivel denso nunca seja menor que o de leitura:
       ele so ALARGA. Os 64px sao os mesmos 2×--space-8 do padding. */
    --largura-leitura: 1200px;
    --largura-densa: max(
        var(--largura-leitura),
        min(1490px, calc(100vw - 2 * var(--space-8)))
    );
    --largura-pagina: var(--largura-leitura);

    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Cascadia Code', 'JetBrains Mono', 'Roboto Mono', monospace;

    --text-xs: 10px;
    --text-sm: 11px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 17px;
    --text-xl: 22px;

    --uppercase-size: 9px;
    --uppercase-tracking: 0.20em;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.10);

    --transition-fast: 120ms ease-out;
    --transition: 180ms ease-out;
}

/* ─── Light (padrao) ────────────────────────────────────────────────── */
:root {
    --surface-0: #F4F6FA;
    --surface-1: #FFFFFF;
    --surface-2: #EEF1F6;
    --surface-3: #E4E8F0;

    --text-0: #0B0F1A;
    --text-1: #3D4659;
    --text-2: #6B7589;
    --text-3: #9CA4B7;

    --border-0: rgba(0, 0, 0, 0.06);
    --border-1: rgba(0, 0, 0, 0.10);
    --border-2: rgba(0, 0, 0, 0.18);

    --accent-gold: #A67400;
    --accent-gold-strong: #8B6300;
    --accent-gold-soft: rgba(166, 116, 0, 0.10);
    --accent-gold-border: rgba(166, 116, 0, 0.30);
    --accent-gold-focus: rgba(166, 116, 0, 0.45);
    --accent-gold-on: #FFFFFF;

    --action-primary-bg: #0B0F1A;
    --action-primary-bg-hover: #1B2235;
    --action-primary-text: #FFFFFF;

    --link: #1E40AF;
    --link-hover: #1E3A8A;

    --info: #1D4ED8;
    --info-soft: rgba(29, 78, 216, 0.08);
    --info-border: rgba(29, 78, 216, 0.30);

    --success: #15803D;
    --success-soft: rgba(21, 128, 61, 0.08);
    --success-border: rgba(21, 128, 61, 0.30);

    --warning: #B45309;
    --warning-soft: rgba(180, 83, 9, 0.10);
    --warning-border: rgba(180, 83, 9, 0.30);

    --danger: #B91C1C;
    --danger-soft: rgba(185, 28, 28, 0.08);
    --danger-border: rgba(185, 28, 28, 0.30);

    --violet: #6D28D9;
    --violet-soft: rgba(109, 40, 217, 0.08);
    --violet-border: rgba(109, 40, 217, 0.30);

    --row-hover: rgba(166, 116, 0, 0.04);
    --row-selected: rgba(166, 116, 0, 0.10);

    --live: #15803D;
    --live-glow: 0 0 6px rgba(21, 128, 61, 0.4);

    /* Series de grafico (F8) — CATEGORICAS, nunca semanticas.
       🚨 Uma curva nao e "sucesso": pintar serie com --success/--warning (o que
       o histograma da /oportunidades faz, e la esta certo, porque melhora/piora
       SAO juizo) faria o leitor ler juizo onde so ha identidade de serie.
       Ordem Okabe-Ito adaptada: distinguiveis tambem em deuteranopia.
       Contraste medido sobre --surface-1 do proprio tema. */
    --serie-1: #1B5FBF;   /* 6,11:1 sobre #FFFFFF */
    --serie-2: #C2410C;   /* 5,18:1 */
    --serie-3: #0F766E;   /* 5,47:1 */
    --serie-4: #7C3AED;   /* 5,70:1 */
}

/* ─── Dark (data-theme="dark") ──────────────────────────────────────── */
[data-theme="dark"] {
    --surface-0: #0B0F1A;
    --surface-1: #131826;
    --surface-2: #1B2235;
    --surface-3: #232B40;

    --text-0: #F3F5F8;
    --text-1: #B6BFCE;
    --text-2: #7B879B;
    --text-3: #54607A;

    --border-0: rgba(255, 255, 255, 0.06);
    --border-1: rgba(255, 255, 255, 0.10);
    --border-2: rgba(255, 255, 255, 0.18);

    --accent-gold: #E6B450;
    --accent-gold-strong: #D4A04C;
    --accent-gold-soft: rgba(230, 180, 80, 0.10);
    --accent-gold-border: rgba(230, 180, 80, 0.30);
    --accent-gold-focus: rgba(230, 180, 80, 0.55);
    --accent-gold-on: #0B0F1A;

    --action-primary-bg: #F3F5F8;
    --action-primary-bg-hover: #FFFFFF;
    --action-primary-text: #0B0F1A;

    --link: #A5B4FC;
    --link-hover: #C7D2FE;

    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.10);
    --info-border: rgba(96, 165, 250, 0.30);

    --success: #4ADE80;
    --success-soft: rgba(74, 222, 128, 0.10);
    --success-border: rgba(74, 222, 128, 0.30);

    --warning: #D49F4C;
    --warning-soft: rgba(201, 123, 11, 0.15);
    --warning-border: rgba(201, 123, 11, 0.35);

    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.10);
    --danger-border: rgba(248, 113, 113, 0.30);

    --violet: #A78BFA;
    --violet-soft: rgba(167, 139, 250, 0.10);
    --violet-border: rgba(167, 139, 250, 0.30);

    --row-hover: rgba(230, 180, 80, 0.04);
    --row-selected: rgba(230, 180, 80, 0.10);

    --live: #4ADE80;
    --live-glow: 0 0 6px rgba(74, 222, 128, 0.6);

    /* Series de grafico (F8) — CATEGORICAS, nunca semanticas.
       🚨 Uma curva nao e "sucesso": pintar serie com --success/--warning (o que
       o histograma da /oportunidades faz, e la esta certo, porque melhora/piora
       SAO juizo) faria o leitor ler juizo onde so ha identidade de serie.
       Ordem Okabe-Ito adaptada: distinguiveis tambem em deuteranopia.
       Contraste medido sobre --surface-1 do proprio tema. */
    --serie-1: #7EB0F5;   /* 7,94:1 sobre #131826 */
    --serie-2: #F0A06A;   /* 8,38:1 */
    --serie-3: #5EC7B8;   /* 8,71:1 */
    --serie-4: #B79BF7;   /* 7,62:1 */
}

/* ─── Utilities (validas em ambos os temas) ─────────────────────────── */

.u-label-tech {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
}

.u-mono { font-family: var(--font-mono); }
.u-num  { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); border-bottom: 1px dotted; }

*:focus-visible {
    outline: 2px solid var(--accent-gold-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}