/* SMS Porto — Design Tokens GNA
 * --------------------------------
 * Paleta oficial conforme Manual de Marca GNA e governança aplicada pelas skills
 * gna-color-governance e gna-dataviz-studio-pro.
 *
 * Princípios cravados aqui (não negociáveis):
 *   1. Ink-Conscious: backgrounds em branco/off-white. Dark Navy só em divisor.
 *   2. Laranja vivo (#FA4616) NUNCA como fill grande. Apenas linhas finas,
 *      bordas de callout, dots focais, número grande de seção.
 *   3. Máximo 10–15% da área visual em cor não-neutra.
 *   4. Texto principal sempre em Cool Gray 11C, secundário em Cool Gray 7C.
 *   5. Traffic light reservado a status semântico real (verde/amarelo/vermelho).
 *      Vermelho de marca (#C72127) NUNCA em dado — usar #D94040 quando for status.
 *   6. Acessibilidade: contraste mínimo WCAG AA (4.5:1 texto, 3:1 gráfico).
 *      Status sempre com pista redundante (cor + ícone + texto).
 */

:root {
    /* ============ Marca primária ============ */
    --gna-orange-vivid: #FA4616;   /* spotlight: linhas finas, bordas, dots, números grandes */
    --gna-orange-warm:  #ED8B00;   /* Amber — paleta de dados monocromática default */
    --gna-gray-11:      #53565A;   /* Cool Gray 11C — texto principal, headers */
    --gna-gray-7:       #97999B;   /* Cool Gray 7C — texto secundário, captions */

    /* ============ Marca secundária ============ */
    --gna-red-brand:    #C72127;   /* USO RESTRITÍSSIMO. Proibido em dados. */
    --gna-warm-gray:    #6A5F5B;   /* Diretoria, ESG, relatórios anuais */
    --gna-teal:         #1B9B97;   /* Sustentabilidade/ESG */
    --gna-blue:         #20C4F4;   /* Informacional, benchmarks */
    --gna-petrol:       #2D5F6B;   /* Links e CTAs corporativos */

    /* ============ Traffic light (status) — pista redundante obrigatória ============ */
    --status-positive:  #9ACA3C;   /* Verde GNA — ▲ No alvo */
    --status-warning:   #FDB933;   /* Amarelo GNA — ► Atenção */
    --status-negative:  #D94040;   /* Vermelho ajustado (NÃO usar #C72127 em dado) — ▼ Crítico */
    --status-info:      #20C4F4;   /* Azul GNA — ● Informativo */

    /* ============ Neutros (estrutura e fundos) ============ */
    --bg-page:          #FAFAF8;   /* Off-white quente — tema Light GNA */
    --bg-card:          #FFFFFF;   /* Cards e áreas elevadas */
    --bg-alt:           #F5F5F5;   /* Alternating rows, blocos sutis */
    --border-card:      #EFECE8;   /* Bordas de card */
    --border-warm:      #E8E5E1;   /* Divisórias finas */
    --ink-deep:         #1C1C28;   /* Dark Navy — uso pontual (divisor, capa) */

    /* ============ Tipografia ============ */
    --font-stack: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 15px;
    --font-size-sm: 13px;
    --font-size-lg: 17px;
    --font-size-xl: 22px;
    --font-size-xxl: 32px;

    /* ============ Espaçamento e raio ============ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* ============ Sombra (sutil, ink-conscious) ============ */
    --shadow-card: 0 1px 2px rgba(28, 28, 40, 0.04), 0 2px 6px rgba(28, 28, 40, 0.04);
    --shadow-elev: 0 4px 12px rgba(28, 28, 40, 0.08);
}