/* ==========================================================================
   Tokens do rascunho HTML — Simulador de Negócios Fundare
   Fontes: Brandbook v4 (§6 cores, §7 tipografia, §8 logotipo), Sistema Tipográfico V4.1
   (§7.4 e §7.5 C/D), documentos-base de Boxes e Cards e de Elementos Técnicos para Dados.
   Rascunho para o designer: cada token vira uma variável no Figma.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("fontes/Sora-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- Paleta institucional (Brandbook v4 §6.1) ---- */
  --azul-profundo: #0F2A43;      /* hierarquia, cabeçalhos, base estrutural */
  --azul-medio: #1F4E79;         /* estrutura secundária, texto de apoio */
  --laranja: #D05A1C;            /* Laranja Estratégico: acento, alerta, destaque crítico (≤ 5%) */
  --laranja-luminosidade: #EC5A1C; /* só no logotipo e em peças; não usado em texto */
  --grafite: #332E2D;            /* texto principal */
  --cinza-claro: #EBE8E3;        /* fundos neutros, respiro */
  --cinza-medio: #C9C3BC;        /* linhas, bordas e divisores; nunca texto */
  --off-white: #FAF9F6;          /* fundo padrão de leitura e superfícies */

  /* ---- Paleta de dados (Brandbook v4 §6.2) ---- */
  --dado-azul-profundo: #0F2A43;
  --dado-azul-medio: #245C8E;    /* Azul Médio Acessível */
  --dado-verde: #20897F;         /* Verde Ajustado: positivo, sucesso */
  --dado-ocre: #D4A72C;
  --dado-roxo: #6B5CA5;
  --dado-cinza: #C6C1B8;         /* Cinza Técnico */
  --dado-laranja: #D05A1C;

  /* ---- Desdobramentos por opacidade (Boxes e Cards §7.1: não são cores novas) ---- */
  --azul-profundo-06: color-mix(in srgb, var(--azul-profundo) 6%, var(--off-white));
  --azul-profundo-10: color-mix(in srgb, var(--azul-profundo) 10%, var(--off-white));
  --azul-profundo-70: color-mix(in srgb, var(--azul-profundo) 70%, var(--off-white));
  --azul-medio-08: color-mix(in srgb, var(--azul-medio) 8%, var(--off-white));
  --azul-medio-14: color-mix(in srgb, var(--azul-medio) 14%, var(--off-white));
  --laranja-08: color-mix(in srgb, var(--laranja) 8%, var(--off-white));
  --laranja-14: color-mix(in srgb, var(--laranja) 14%, var(--off-white));
  --verde-10: color-mix(in srgb, var(--dado-verde) 10%, var(--off-white));
  --cinza-claro-50: color-mix(in srgb, var(--cinza-claro) 50%, var(--off-white));
  --off-white-72: color-mix(in srgb, var(--off-white) 72%, var(--azul-profundo)); /* texto secundário sobre azul */

  /* ---- Papéis (usar estes nos componentes) ---- */
  --fundo-pagina: var(--cinza-claro-50);
  --superficie: var(--off-white);
  --superficie-alternada: var(--cinza-claro-50);
  --texto: var(--grafite);
  --texto-apoio: var(--azul-medio);      /* contraste calculado na página da base visual */
  --titulo: var(--azul-profundo);
  --borda: var(--cinza-medio);
  --borda-forte: var(--azul-profundo-70);
  --foco: var(--laranja);                /* anel de foco: elemento gráfico, 3,86:1 ≥ 3:1 */
  --acao: var(--azul-profundo);
  --acao-texto: var(--off-white);
  --alerta: var(--laranja);              /* nunca vermelho (Brandbook §6.2) */
  --positivo: var(--dado-verde);

  /* ---- Gradação fixa por score (proposta; Briefing §11.3 pede 5 tons fixos) ----
     5 = menor risco … 1 = maior risco. São as cinco cores da paleta de dados com
     pelo menos 3:1 sobre Off-White, do positivo (verde) ao alerta máximo (laranja).
     A planilha usa 5 Azul Profundo, 4 Azul Médio, 3 Ocre e alterna Roxo e Cinza
     Técnico em 2 e 1; Ocre e Cinza ficam abaixo de 3:1. Os sócios conferem e aprovam. */
  --score-5: var(--dado-verde);
  --score-4: var(--dado-azul-medio);
  --score-3: var(--dado-azul-profundo);
  --score-2: var(--dado-roxo);
  --score-1: var(--dado-laranja);

  /* ---- Plano × Realizado (proposta) ----
     A planilha usa Ocre tracejado no Plano; o Ocre não atinge 3:1 sobre Off-White.
     Brandbook §6.2: "começar com Azul Profundo e Azul Médio Acessível". */
  --serie-realizado: var(--dado-azul-profundo);
  --serie-plano: var(--dado-azul-medio);

  /* ---- Tipografia (Brandbook §7; V4.1 §7.5 D: em simuladores, Inter com corpo ≥ 14 px) ---- */
  --fonte-titulo: "Sora", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", Arial, sans-serif;
  --t-12: 12px;   /* metadados e eixos secundários, só quando necessário */
  --t-14: 14px;   /* corpo mínimo, tabelas, campos */
  --t-16: 16px;   /* corpo de leitura */
  --t-18: 18px;   /* título de cartão (Sora SemiBold) */
  --t-20: 20px;
  --t-24: 24px;   /* H2 (Sora SemiBold) */
  --t-32: 32px;   /* H1 de tela (Sora Bold); V4.1 pede 48–56 px para sites: a validar */
  --t-40: 40px;   /* números de destaque */
  --entrelinha: 1.45;       /* 130% a 150% */
  --entrelinha-justa: 1.25; /* títulos e números */

  /* ---- Espaço, forma e sombra ---- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;
  --raio: 4px;
  --raio-grande: 6px;
  --filete: 1px;            /* 1 pt nos documentos-base */
  --barra-destaque: 4px;    /* filete lateral dos cartões */
  --sombra: 0 1px 2px color-mix(in srgb, var(--azul-profundo) 10%, transparent);
  --sombra-dialogo: 0 12px 32px color-mix(in srgb, var(--azul-profundo) 24%, transparent);

  /* ---- Estrutura ---- */
  --altura-cabecalho: 64px;
  --largura-conteudo: 1760px;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* hashes e códigos técnicos */
  --coluna-decisoes: 480px;
}