/* HACHUB MIAD — tokens de design (doc 05 §2) */

:root {
  /* ---------- Marca ---------- */
  --marca-500: #0891B2;
  --marca-600: #0E7490;
  --marca-700: #155E75;
  --marca-400: #22D3EE;
  --marca-300: #67E8F9;
  --marca-900: #083344;

  /* ---------- Severidade (deliberadamente fora da família cyan) ---------- */
  --sev-0: #64748B;
  --sev-1: #0EA5E9;
  --sev-2: #EAB308;
  --sev-3: #F97316;
  --sev-4: #EF4444;
  --sev-5: #9F1239;
  --sev-ok: #10B981;

  /* ---------- Tipografia ---------- */
  --fonte-display: 'Space Grotesk', system-ui, sans-serif;
  --fonte-corpo:   'IBM Plex Sans', system-ui, sans-serif;
  --fonte-dados:   'IBM Plex Mono', ui-monospace, monospace;

  --txt-2xs: 0.6875rem;
  --txt-xs:  0.75rem;
  --txt-sm:  0.8125rem;
  --txt-base:0.875rem;
  --txt-lg:  1rem;
  --txt-xl:  1.25rem;
  --txt-2xl: 1.75rem;
  --txt-3xl: 2.5rem;
  --txt-4xl: 3.5rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --trilha-rotulo: 0.08em;

  /* ---------- Espaçamento (escala de 4) ---------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;
  --e-4: 1rem;     --e-5: 1.25rem;  --e-6: 1.5rem;
  --e-8: 2rem;     --e-10: 2.5rem;  --e-12: 3rem;
  --e-16: 4rem;    --e-20: 5rem;    --e-24: 6rem;

  /* ---------- Forma ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-full: 9999px;

  --borda: 1px;
  --regua-altura: 4px;
  --altura-topo: 52px;
  --largura-lateral: 232px;
  --largura-lateral-recolhida: 56px;
  /* Coluna ocupada pela lateral agora. Vira 56px quando a lateral retrai; a
     barra superior segue este valor para manter o alinhamento com o conteúdo. */
  --coluna-lateral: var(--largura-lateral);

  /* ---------- Movimento ---------- */
  --t-rapido: 120ms;
  --t-medio: 220ms;
  --t-lento: 400ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  /* ---------- Camadas ---------- */
  --z-regua: 40;
  --z-topo: 50;
  --z-lateral: 45;
  --z-modal: 100;
  --z-toast: 110;
}

/* ---------- Tema escuro (padrão) ----------
   Azul-petróleo derivado do cyan da marca, não preto neutro: o produto
   continua parecendo o produto quando escurece. */
[data-tema="escuro"] {
  --fundo:            #071A20;
  --fundo-elevado:    #0C242C;
  --superficie:       #102C35;
  --superficie-alt:   #163741;
  --borda-cor:        #1E4753;
  --borda-sutil:      #143039;

  --txt-forte:        #ECFEFF;
  --txt-normal:       #C3DDE4;
  --txt-suave:        #7FA3AD;
  --txt-tenue:        #4E7079;

  --acento:           var(--marca-400);
  --acento-fundo:     rgba(34, 211, 238, 0.10);
  --foco:             var(--marca-300);

  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 4px 12px rgba(0,0,0,.45);
  --sombra-3: 0 12px 32px rgba(0,0,0,.5);

  --grade-grafico: rgba(127,163,173,.12);
}

/* ---------- Tema claro: papel frio, não branco puro ---------- */
[data-tema="claro"] {
  --fundo:            #F4F7F8;
  --fundo-elevado:    #FFFFFF;
  --superficie:       #FFFFFF;
  --superficie-alt:   #EDF3F5;
  --borda-cor:        #D3E1E6;
  --borda-sutil:      #E6EEF1;

  --txt-forte:        #06232C;
  --txt-normal:       #234A56;
  --txt-suave:        #52737D;
  --txt-tenue:        #8AA6AE;

  --acento:           var(--marca-500);
  --acento-fundo:     rgba(8, 145, 178, 0.08);
  --foco:             var(--marca-600);

  --sombra-1: 0 1px 2px rgba(6,35,44,.06);
  --sombra-2: 0 4px 12px rgba(6,35,44,.08);
  --sombra-3: 0 12px 32px rgba(6,35,44,.12);

  --grade-grafico: rgba(35,74,86,.10);
}

/* ---------- Alto contraste para telão de NOC ---------- */
[data-tema="telao"] {
  --fundo:            #000000;
  --fundo-elevado:    #0A1418;
  --superficie:       #0F1E24;
  --superficie-alt:   #162B33;
  --borda-cor:        #2E6373;
  --borda-sutil:      #1B3C46;

  --txt-forte:        #FFFFFF;
  --txt-normal:       #E4F6FA;
  --txt-suave:        #A9CBD4;
  --txt-tenue:        #6E939D;

  --acento:           var(--marca-300);
  --acento-fundo:     rgba(103, 232, 249, 0.14);
  --foco:             #FFFFFF;

  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: none;

  --grade-grafico: rgba(169,203,212,.20);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .regua-sinal { animation: none; }
}