/*
 * Design system: tokens (SENAI-PR / Sistema Fiep).
 * Cores de marca extraídas de static/brand/senai-pr.png (ver DESIGN_SYSTEM.md).
 * Não altere valores sem revisar o contraste em /design-system.
 */

:root {
  /* Marca primária (extraída do logo: #035781 = 600) */
  --brand-50: #F0FAFF;
  --brand-100: #DCF3FE;
  --brand-200: #B9E7FD;
  --brand-300: #82D4FC;
  --brand-400: #38B9FA;
  --brand-500: #0594DB;
  --brand-600: #035781;
  --brand-700: #024364;
  --brand-800: #022F46;
  --brand-900: #011E2D;

  /* Marca secundária (extraída do logo: #AAC5D4 = 300) */
  --brand2-50: #F5F8FA;
  --brand2-100: #E7EFF3;
  --brand2-200: #D0DFE7;
  --brand2-300: #AAC5D4;
  --brand2-400: #78A3BA;
  --brand2-500: #4B7B95;
  --brand2-600: #395C70;
  --brand2-700: #223844;
  --brand2-800: #18272F;
  --brand2-900: #0F191E;

  /* Neutros frios */
  --neutral-0: #FFFFFF;
  --neutral-50: #F5F8FA;
  --neutral-100: #EBF0F4;
  --neutral-200: #D5DEE6;
  --neutral-300: #B3C0CC;
  --neutral-400: #8593A1;
  --neutral-500: #66737F;
  --neutral-600: #4F5A65;
  --neutral-700: #3A434D;
  --neutral-800: #252C34;
  --neutral-900: #14191F;

  /* Escala 4 px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --transicao: 150ms ease;

  /* Tipografia */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-numeros: var(--fonte);
  --tamanho-base: 16px;
  --tamanho-titulo: 32px;
  --tamanho-subtitulo: 24px;
  --tamanho-pequeno: 14px;
  --tamanho-kpi: 64px;

  /* Estados (sem cor de marca) */
  --sucesso-claro: #15803D;
  --alerta-claro: #B45309;
  --erro-claro: #B91C1C;
  --info-claro: #035781;
  --sucesso-escuro: #4ADE80;
  --alerta-escuro: #FBBF24;
  --erro-escuro: #F87171;
  --info-escuro: #82D4FC;
}

/* Tema claro (padrão quando não há data-theme) */
:root,
[data-theme="claro"] {
  color-scheme: light;
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-100);
  --texto: var(--neutral-900);
  --texto-suave: var(--neutral-600);
  --acento: var(--brand-600);
  --acento-texto: var(--neutral-0);
  --acento-suave: var(--brand-50);
  --borda: var(--neutral-200);
  --borda-campo: var(--neutral-500);
  --foco: var(--brand-500);
  --sucesso: var(--sucesso-claro);
  --alerta: var(--alerta-claro);
  --erro: var(--erro-claro);
  --info: var(--info-claro);
  --marca-caixa: var(--neutral-0);
  --sombra: 0 1px 2px rgba(20, 25, 31, .08), 0 4px 12px rgba(20, 25, 31, .06);

  /* Categorias de apps: cor fixa por categoria, em todos os gráficos */
  --cat-redes: #035781;
  --cat-mensagens: #0594DB;
  --cat-video: #4B7B95;
  --cat-jogos: #252C34;
  --cat-estudo: #8593A1;
  --cat-navegacao: #AAC5D4;
  --cat-outros: #4F5A65;
}

/* Tema escuro: fundo azul-marinho derivado da marca, não preto puro */
[data-theme="escuro"] {
  color-scheme: dark;
  --bg: var(--brand-900);
  --surface: var(--brand-800);
  --surface-2: var(--brand-700);
  --texto: var(--neutral-50);
  --texto-suave: var(--brand2-300);
  --acento: var(--brand-300);
  --acento-texto: var(--brand-900);
  --acento-suave: var(--brand-800);
  --borda: var(--brand-700);
  --borda-campo: var(--brand-400);
  --foco: var(--brand-200);
  --sucesso: var(--sucesso-escuro);
  --alerta: var(--alerta-escuro);
  --erro: var(--erro-escuro);
  --info: var(--info-escuro);
  --marca-caixa: var(--neutral-0);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);

  --cat-redes: #82D4FC;
  --cat-mensagens: #E8EDF2;
  --cat-video: #AAC5D4;
  --cat-jogos: #0594DB;
  --cat-estudo: #78A3BA;
  --cat-navegacao: #38B9FA;
  --cat-outros: #66737F;
}

/* Sem data-theme gravado: segue o aparelho (o tema-inicial.js normalmente já define o atributo) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--brand-900);
    --surface: var(--brand-800);
    --surface-2: var(--brand-700);
    --texto: var(--neutral-50);
    --texto-suave: var(--brand2-300);
    --acento: var(--brand-300);
    --acento-texto: var(--brand-900);
    --acento-suave: var(--brand-800);
    --borda: var(--brand-700);
    --borda-campo: var(--brand-400);
    --foco: var(--brand-200);
    --sucesso: var(--sucesso-escuro);
    --alerta: var(--alerta-escuro);
    --erro: var(--erro-escuro);
    --info: var(--info-escuro);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
    --cat-redes: #82D4FC;
    --cat-mensagens: #E8EDF2;
    --cat-video: #AAC5D4;
    --cat-jogos: #0594DB;
    --cat-estudo: #78A3BA;
    --cat-navegacao: #38B9FA;
    --cat-outros: #66737F;
  }
}