/* ==========================================================================
   Sistema de design da Guaporé · tokens
   Fonte única de cor, letra, espaço, forma e movimento de TODA tela do sistema.
   Direção e regras: README.md nesta pasta. Continuum, 06/11/2026.

   DOIS TEMAS × DOIS MODOS, escolhidos no <html>:
     data-tema="controle"   · Sala de controle (PADRÃO)   · data-modo="escuro" (padrão) | "claro"
     data-tema="engenharia" · Engenharia                   · data-modo="claro" | "escuro"
   Tela e código usam só os nomes semânticos daqui. Trocar a marca = trocar os
   valores de --cor-marca e do destaque; nada mais muda.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---------- escala de letra (1,25 · corpo de 16 a 17) ---------- */
  --txt-micro:    0.75rem;   /* 12 · marcação de fonte, mono */
  --txt-corpo-p:  0.8125rem; /* 13 · linha secundária */
  --txt-corpo:    1rem;      /* 16 · leitura */
  --txt-titulo-p: 1.0625rem; /* 17 · título de seção no celular */
  --txt-titulo:   1.375rem;  /* 22 · título de tela */
  --txt-kpi:      1.5rem;    /* 24 · número de indicador */
  --txt-numero:   3.5rem;    /* 56 · número do destaque */
  --lh-corpo: 1.5; --lh-titulo: 1.15;
  --peso-normal: 400; --peso-medio: 500; --peso-forte: 600;
  --entreletra-mono: 0.06em;

  /* ---------- espaço (base 4) ---------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-7: 32px; --e-8: 48px; --e-9: 64px;
  --alvo-min: 44px;
  --largura-tela: 1200px;

  /* ---------- movimento: funcional ---------- */
  --t-estado: 140ms; --t-entrada: 220ms; --curva: cubic-bezier(.2, .8, .2, 1);

  /* ---------- padrão: Sala de controle · escuro ---------- */
  --fonte-corpo: "Space Grotesk", system-ui, sans-serif;
  --fonte-numero: "JetBrains Mono", ui-monospace, monospace;
  --raio-p: 4px; --raio-m: 8px; --raio-g: 12px;
}

/* ==========================================================================
   TEMA · SALA DE CONTROLE (instrumento: grade fina, número em código, luz ciano)
   ========================================================================== */
[data-tema="controle"] {
  --fonte-corpo: "Space Grotesk", system-ui, sans-serif;
  --fonte-numero: "JetBrains Mono", ui-monospace, monospace;
  --raio-p: 4px; --raio-m: 8px; --raio-g: 12px;
}
:root, [data-tema="controle"][data-modo="escuro"] {
  --sup-base: #061118;
  --sup-elevada: #0b1f29;
  --sup-elevada-2: #0f2833;
  --sup-destaque: linear-gradient(140deg, #0f2d3a 0%, #0a1c25 100%);
  --grade: linear-gradient(rgba(91,136,155,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,136,155,.08) 1px, transparent 1px);
  --grade-tam: 22px 22px;
  --txt-forte: #e6f1f4; --txt-medio: #b4c8d0; --txt-suave: #86a3ae;
  --txt-destaque: #e6f1f4; --txt-destaque-suave: #86a3ae;
  --cor-marca: #5b889b;
  --cor-acento: #35e0e6; --txt-sobre-acento: #04141a;
  --acento-destaque: #35e0e6; --txt-sobre-acento-destaque: #04141a;
  --numero-destaque: #35e0e6;
  --sinal-ok: #4ef0a0; --sinal-atencao: #ffc35a; --sinal-erro: #ff6b6b; --sinal-info: #35e0e6;
  --sinal-ok-fundo: rgba(78,240,160,.12); --sinal-atencao-fundo: rgba(255,195,90,.12);
  --sinal-erro-fundo: rgba(255,107,107,.13); --sinal-info-fundo: rgba(53,224,230,.12);
  --borda-sutil: rgba(91,136,155,.26); --borda-destaque: rgba(53,224,230,.38); --borda-campo: #5f7f8c;
  --foco: #35e0e6;
  --brilho: 10px;            /* LEDs e número acesos */
  --brilho-numero: 0 0 24px rgba(53,224,230,.45);
  --halo: radial-gradient(180px circle at 100% 0%, rgba(53,224,230,.22), transparent 70%);
  color-scheme: dark;
}
[data-tema="controle"][data-modo="claro"] {
  --sup-base: #edf3f5;
  --sup-elevada: #ffffff;
  --sup-elevada-2: #f4f9fa;
  --sup-destaque: linear-gradient(140deg, #0f2d3a 0%, #0a1c25 100%);  /* o destaque segue escuro: é a sala de controle */
  --grade: linear-gradient(rgba(38,67,87,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(38,67,87,.07) 1px, transparent 1px);
  --grade-tam: 22px 22px;
  --txt-forte: #0a1a22; --txt-medio: #2f4651; --txt-suave: #4f6773;
  --txt-destaque: #e6f1f4; --txt-destaque-suave: #9fbac4;
  --cor-marca: #264357;
  --cor-acento: #0b7480; --txt-sobre-acento: #ffffff;
  --acento-destaque: #35e0e6; --txt-sobre-acento-destaque: #04141a;
  --numero-destaque: #35e0e6;
  --sinal-ok: #0e7343; --sinal-atencao: #8a5a06; --sinal-erro: #b42318; --sinal-info: #0b7480;
  --sinal-ok-fundo: #e2f4ea; --sinal-atencao-fundo: #fbf1da; --sinal-erro-fundo: #fde8e6; --sinal-info-fundo: #dff1f3;
  --borda-sutil: #d3e0e5; --borda-destaque: rgba(53,224,230,.38); --borda-campo: #7d959f;
  --foco: #0b7480;
  --brilho: 0px;
  --brilho-numero: 0 0 24px rgba(53,224,230,.35);
  --halo: radial-gradient(180px circle at 100% 0%, rgba(53,224,230,.2), transparent 70%);
  color-scheme: light;
}

/* ==========================================================================
   TEMA · ENGENHARIA (software de projeto: papel de pontos, petróleo, azul elétrico)
   ========================================================================== */
[data-tema="engenharia"] {
  --fonte-corpo: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-numero: "IBM Plex Mono", ui-monospace, monospace;
  --raio-p: 6px; --raio-m: 10px; --raio-g: 12px;
}
[data-tema="engenharia"], [data-tema="engenharia"][data-modo="claro"] {
  --sup-base: #f6f8f9;
  --sup-elevada: #ffffff;
  --sup-elevada-2: #f9fbfc;
  --sup-destaque: #264357;
  --grade: radial-gradient(#c9d5db 1px, transparent 1px);
  --grade-tam: 18px 18px;
  --txt-forte: #10202a; --txt-medio: #33495a; --txt-suave: #55697a;
  --txt-destaque: #ffffff; --txt-destaque-suave: #b9cdd5;
  --cor-marca: #264357;
  --cor-acento: #1f68d6; --txt-sobre-acento: #ffffff;
  --acento-destaque: #5aa6ff; --txt-sobre-acento-destaque: #04121f;
  --numero-destaque: #ffffff;
  --sinal-ok: #167a4a; --sinal-atencao: #8a5a06; --sinal-erro: #b42318; --sinal-info: #1d5fc4;
  --sinal-ok-fundo: #e3f5ec; --sinal-atencao-fundo: #fbf1da; --sinal-erro-fundo: #fde8e8; --sinal-info-fundo: #e3eeff;
  --borda-sutil: #dbe3e8; --borda-destaque: transparent; --borda-campo: #7f93a1;
  --foco: #1f68d6;
  --brilho: 0px;
  --brilho-numero: none;
  --halo: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 16px 16px;
  color-scheme: light;
}
[data-tema="engenharia"][data-modo="escuro"] {
  --sup-base: #0f1820;
  --sup-elevada: #16232d;
  --sup-elevada-2: #1a2a35;
  --sup-destaque: #1d3443;
  --grade: radial-gradient(#26353f 1px, transparent 1px);
  --grade-tam: 18px 18px;
  --txt-forte: #e9eef2; --txt-medio: #c0cdd6; --txt-suave: #9aabb7;
  --txt-destaque: #e9eef2; --txt-destaque-suave: #9fb6c2;
  --cor-marca: #8fb3c2;
  --cor-acento: #5aa6ff; --txt-sobre-acento: #04121f;
  --acento-destaque: #5aa6ff; --txt-sobre-acento-destaque: #04121f;
  --numero-destaque: #e9eef2;
  --sinal-ok: #3ccf8e; --sinal-atencao: #f0b84a; --sinal-erro: #ff7a7a; --sinal-info: #7cb4ff;
  --sinal-ok-fundo: rgba(60,207,142,.13); --sinal-atencao-fundo: rgba(240,184,74,.13);
  --sinal-erro-fundo: rgba(255,122,122,.13); --sinal-info-fundo: rgba(124,180,255,.13);
  --borda-sutil: #263744; --borda-destaque: transparent; --borda-campo: #5d7383;
  --foco: #5aa6ff;
  --brilho: 0px;
  --brilho-numero: none;
  --halo: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 16px 16px;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) { :root { --t-estado: 0ms; --t-entrada: 0ms; } }