/* TraderMap — Design Tokens (Documento 09)
   Fontes auto-hospedadas (decisao 77 — nunca via CDN de terceiros em runtime).
   Tema claro e a base (:root); tema escuro sobrescreve via
   prefers-color-scheme (automatico) e via [data-theme] (alternancia manual,
   persistida em localStorage por assets/js/theme.js). */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/lora-600.woff2') format('woff2');
}

/* Identidade visual "navy + dourado + serifada" (pedido do usuario: levar a
   identidade da tela de login pro app inteiro, sem "morrer" depois do
   login). DM Serif Display so pra titulo de pagina/numeros "hero" (nunca
   pro corpo do texto — e' um display face, pesado em blocos de texto
   corrido); JetBrains Mono so pra numeros de dado em tabela/card (alinhar
   digitos monoespacados em coluna, igual --tm-num ja fazia com tabular-nums
   do Inter, so que agora com uma face desenhada pra isso). */
@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-serif-display-400.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
    color-scheme: light;

    /* Documento 09, 2.1 — Azul Profundo. Recalibrado (ajuste visual
       pos-passo-14, pedido do usuario): navy mais profundo/frio, pra casar
       com a identidade da tela de login (auth.css ja usava esse mesmo
       degrade em .tm-auth-brand) — antes um azul mais "corporativo"
       generico, agora o mesmo navy da marca em qualquer lugar que usar
       --color-accent (links, botao primario, estado ativo). */
    --tm-azul-900: #0C1E38;
    --tm-azul-700: #14294A;
    --tm-azul-600: #1A3A63;
    --tm-azul-400: #5B84AD;
    --tm-azul-100: #DCE7F4;
    --tm-azul-50: #F0F5FB;

    /* Dourado da marca — decorativo/destaque (mesmo espirito de --color-teal/
       --color-roxo abaixo: categorico, sem significado de bom/ruim), nunca
       confundir com --color-warning (que e' semantico — "atencao", ex:
       cotacao atrasada). Usar com moderacao: estados ativos, icones-chave
       (ex: taxa de acerto), elementos de destaque — nunca fundo grande. */
    --color-gold: #C99A4B;

    /* Documento 09, 2.2 — semanticas (mercado/resultado), tema claro.
       Recalibrado junto (ajuste visual pos-passo-14): mesma familia de cor,
       tom levemente mais quente/saturado — --color-warning mantido
       deliberadamente mais escuro/opaco que --color-gold acima, pra nao
       competir visualmente com o dourado de destaque (aviso deve parecer
       secundario, nao "brilhante"). */
    --color-positive: #2F7A55;
    --color-negative: #B5453A;
    --color-warning: #A97A3D;
    --color-critical: #8C1F1F;
    --color-neutral-info: #4A4A48;

    /* Categoricas — decorativas, sem significado de bom/ruim (diferente
       de positive/negative/warning/critical acima). Pedido do usuario:
       sistema "monocromatico" — cada tipo de card de KPI/estatistica
       ganha uma cor propria (icone), nao so --color-accent repetido em
       tudo. Ver .tm-stat-card-icon--teal/--roxo e .tm-kpi-card__icon--*
       em components.css, aplicado no Dashboard e em Relatorios. */
    --color-teal: #157A6E;
    --color-roxo: #6B4A9C;

    /* Documento 09, 2.3 — neutros de base, tema claro. Recalibrado (ajuste
       visual pos-passo-14): creme bem claro e pouco saturado (evitar tom
       amarelo forte), pra combinar com o navy/dourado da marca em vez do
       cinza neutro generico de antes. */
    --color-bg: #FAF8F2;
    --color-surface: #FFFFFF;
    /* Painel "dentro" de um .tm-card (ex: sub-cards do Dashboard) — mais
       claro que --color-bg subtraido do branco do --color-surface, pra dar
       uma segunda camada sem duplicar borda/sombra de outro .tm-card
       aninhado. Bug real corrigido nesta sessao: dashboard.blade.php ja
       referenciava var(--color-bg-subtle) desde a criacao do card de
       "Desempenho por horario" (pos-passo-14), mas o token nunca chegou a
       ser definido em tokens.css — os sub-cards renderizavam com fundo
       transparente (var() sem fallback cai no valor inicial da propriedade
       — nao herda --color-bg), quase invisiveis sobre o card branco. */
    --color-bg-subtle: #F5F2EA;
    --color-border: #E6E1D3;
    --color-text: #221F1A;
    --color-text-secondary: #5C5850;
    --color-text-tertiary: #8A867C;

    --color-accent: var(--tm-azul-600);
    --color-accent-hover: var(--tm-azul-700);
    --color-accent-bg: var(--tm-azul-50);
    --color-accent-tag-bg: var(--tm-azul-100);

    --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Indirecao pros graficos (assets/js/charts.js le esses tokens, nao
       --color-* direto) — por padrao so aponta pros mesmos tokens de
       sempre (nenhum grafico existente muda de cor), mas permite uma
       pagina especifica sobrescrever so a paleta do grafico (escopado a
       algum elemento ancestral) sem tocar no design system inteiro. Como
       sao var(), resolvem sozinhos pro valor certo em cada tema — nao
       precisa repetir nos blocos de tema escuro abaixo. */
    --tm-chart-line: var(--color-accent);
    --tm-chart-grid: var(--color-border);
    --tm-chart-tick: var(--color-text-tertiary);
    --tm-chart-surface: var(--color-surface);
    --tm-chart-text: var(--color-text);
    /* Preenchimento em area sob a linha (ajuste visual pos-passo-14, pedido
       do usuario: "gradiente dourado/navy pra positivo, vermelho suave pra
       negativo" em vez de linha fina sem preenchimento). Dourado puro (nao
       misturado com --color-accent/navy): tentativa inicial de misturar as
       duas cores via color-mix cancelava as duas tonalidades e virava um
       cinza sem graca (mistura aditiva de tom quente com tom frio) — mantido
       so' dourado, mais fiel a intencao visual. Ponta solida perto da linha,
       esvaindo pra transparente — assets/js/charts.js monta o gradient
       canvas lendo esses tokens. */
    --tm-chart-fill-positive-start: color-mix(in srgb, var(--color-gold) 45%, transparent);
    --tm-chart-fill-positive-end: transparent;
    --tm-chart-fill-negative-start: color-mix(in srgb, var(--color-negative) 45%, transparent);
    --tm-chart-fill-negative-end: transparent;
    /* Mais contrastante que --tm-chart-tick de proposito (pedido do
       usuario: "destacar a linha de zero, mais visivel") — nao pode ser o
       mesmo tom apagado dos rotulos do eixo. */
    --tm-chart-zero-line: var(--color-text-secondary);

    /* Documento 09, 3.1 — tipografia */
    --font-heading: 'Lora', Georgia, serif;
    --font-body: 'Inter', -apple-system, "Segoe UI", sans-serif;
    /* Titulo de pagina e numeros "hero" (resultado do mes, nota
       comportamental) — nunca usado em texto corrido/paragrafo, so' nesses
       pontos de destaque (ver base.css/components.css onde e' aplicado). */
    --font-display: 'DM Serif Display', Georgia, serif;
    /* Numeros de dado em tabela/card (precos, saldo, resultado, percentual)
       — .tm-num troca pra essa fonte, mantendo o tabular-nums que ja tinha. */
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Documento 09, 4 — espacamento (base 8px) e grid */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --radius-control: 6px;
    /* 10px -> 14px: cantos mais suaves nos cards do sistema inteiro (pedido
       do usuario — visual "parecendo view interna"); efeito sutil, global,
       nao muda nenhuma cor/contraste. */
    --radius-card: 14px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-positive: #3FCB82;
        --color-negative: #E5615F;
        /* Mantido deliberadamente mais opaco/acastanhado que --color-gold
           logo abaixo (mesmo principio do tema claro: aviso nao deve
           competir visualmente com o dourado de destaque). */
        --color-warning: #B58A52;
        --color-critical: #F0524F;
        --color-neutral-info: #B8B7B2;
        --color-teal: #3ECDBC;
        --color-roxo: #A98AE0;
        --color-gold: #D9B36A;

        /* Usuario reportou tema escuro "escuro demais, prejudicando o
           contraste dos elementos" — surface/border originais (#1B1F27 /
           #2C313B) tinham so 1.11:1 e 1.27:1 de contraste contra o bg,
           bem abaixo do minimo de 3:1 do WCAG 1.4.11 para bordas de
           componente de UI — cartao, tabela e input praticamente somem no
           fundo. Ajustado (medido com a formula de luminancia relativa do
           WCAG): surface 1.18:1, border 3.34:1 (vs surface) / 3.94:1 (vs
           bg), text-tertiary 4.81:1 (vs bg). */
        --color-bg: #12151A;
        --color-surface: #20242E;
        /* Painel recuado dentro de um .tm-card — entre --color-bg e
           --color-surface (mesma relacao do tema claro: mais escuro que o
           card, sem repetir borda/sombra de outro card aninhado). */
        --color-bg-subtle: #1A1E27;
        --color-border: #6B7490;
        --color-text: #EDEDEA;
        --color-text-secondary: #9C9B96;
        --color-text-tertiary: #84837C;

        --color-accent: var(--tm-azul-400);
        --color-accent-hover: #6C9CCB;
        --color-accent-bg: rgba(76, 126, 181, 0.14);
        --color-accent-tag-bg: rgba(76, 126, 181, 0.22);

        --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-positive: #3FCB82;
    --color-negative: #E5615F;
    --color-warning: #B58A52;
    --color-critical: #F0524F;
    --color-neutral-info: #B8B7B2;
    --color-teal: #3ECDBC;
    --color-roxo: #A98AE0;
    --color-gold: #D9B36A;

    /* Mesmo ajuste de contraste do bloco @media acima (necessario duplicar
       — este bloco atende o alternador manual [data-theme], o outro o
       "prefers-color-scheme" automatico; ver comentario la para os
       numeros). */
    --color-bg: #12151A;
    --color-surface: #20242E;
    --color-bg-subtle: #1A1E27;
    --color-border: #6B7490;
    --color-text: #EDEDEA;
    --color-text-secondary: #9C9B96;
    --color-text-tertiary: #84837C;

    --color-accent: var(--tm-azul-400);
    --color-accent-hover: #6C9CCB;
    --color-accent-bg: rgba(76, 126, 181, 0.14);
    --color-accent-tag-bg: rgba(76, 126, 181, 0.22);

    --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.4);
}