/* ════════════════════════════════════════════════════════════════════════════
   NOVA OPS UI · TOKENS
   Fundação do design system: fonte, cores, camada semântica, raios, sombras,
   espaçamento, reset e keyframes.
   Carregue SEMPRE antes de components.css.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/onest-latin-variable.woff2") format("woff2");
}

:root {
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --brand: #2d63f6;
  --brand-strong: #1746d1;
  --brand-soft: #e9f0ff;
  --navy: #111d40;
  --navy-soft: #1b2b57;
  --accent: #70e0b4;

  /* ── Paleta base (usada por ícones decorativos e gráficos) ─────────────── */
  --success: #27b985;  --success-soft: #e4f8f0;
  --warning: #f1a63b;  --warning-soft: #fff3df;
  --danger:  #e65d68;  --danger-soft:  #ffeaed;
  --violet:  #7f66ee;  --violet-soft:  #eeeaff;

  /* ── Cor semântica ─────────────────────────────────────────────────────────
     A cor significa SITUAÇÃO, não categoria. Quem bate o olho lê o estado antes
     de ler o número. Azul não é "cor de tudo": fica restrito à marca e à ação
     primária.

     Cada situação tem três valores:
       -fill  cor cheia  → pontos, barras, ícones, marcadores
       -soft  fundo      → chips, cartões, faixas
       -ink   texto      → escurecido o bastante para 4.5:1 sobre o -soft
                           (o verde e o âmbar puros REPROVAM como texto pequeno) */
  --ok-fill: #27b985;        --ok-soft: #e4f8f0;        --ok-ink: #0d7550;
  --attention-fill: #f1a63b; --attention-soft: #fff3df; --attention-ink: #8a5a06;
  --critical-fill: #e65d68;  --critical-soft: #ffeaed;  --critical-ink: #b32330;
  --neutral-fill: #94a1b8;   --neutral-soft: #f1f4f9;   --neutral-ink: #5e6d89;
  --info-fill: #2d63f6;      --info-soft: #e9f0ff;      --info-ink: #1746d1;

  /* ── Superfícies e texto ───────────────────────────────────────────────── */
  --background: #eef3fa;
  --surface: #fff;
  --surface-muted: #f6f8fc;
  --text: #17213a;
  --text-soft: #5e6d89;
  --border: #e4eaf3;

  /* ── Elevação ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 3px 16px rgba(25, 42, 77, 0.06);
  --shadow-md: 0 18px 50px rgba(25, 42, 77, 0.12);
  --shadow-brand: 0 12px 28px rgba(45, 99, 246, 0.28);

  /* ── Raios ─────────────────────────────────────────────────────────────── */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;

  /* ── Espaçamento e layout ──────────────────────────────────────────────── */
  --sidebar: 88px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .75, .25, 1);
}

/* ══ Camada semântica ════════════════════════════════════════════════════════
   Um elemento declara data-status="ok|attention|critical|neutral|info" e herda
   as três cores da situação em --tone / --tone-soft / --tone-ink.
   NADA aqui escolhe cor por categoria de métrica.

   Componentes que aceitam --tone: .kpi-card, .status-badge, .stat-icon,
   .timeline-icon, .alert-row, .micro-progress, .truck-marker, .kanban-card,
   .calendar-event, .vehicle-card, .branch-item, .verdict, .tv-verdict, .ring.  */
[data-status="ok"]        { --tone: var(--ok-fill);        --tone-soft: var(--ok-soft);        --tone-ink: var(--ok-ink); }
[data-status="attention"] { --tone: var(--attention-fill); --tone-soft: var(--attention-soft); --tone-ink: var(--attention-ink); }
[data-status="critical"]  { --tone: var(--critical-fill);  --tone-soft: var(--critical-soft);  --tone-ink: var(--critical-ink); }
[data-status="neutral"]   { --tone: var(--neutral-fill);   --tone-soft: var(--neutral-soft);   --tone-ink: var(--neutral-ink); }
[data-status="info"]      { --tone: var(--info-fill);      --tone-soft: var(--info-soft);      --tone-ink: var(--info-ink); }

/* ══ Reset ═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--background);
  font-family: "Onest", "Avenir Next", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; fill: currentColor; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(45, 99, 246, .3); outline-offset: 3px; }

.sr-only {
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}
.skip-link {
  position: fixed; top: 10px; left: 50%; z-index: 9999; transform: translate(-50%, -160%);
  padding: 12px 18px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ══ Escala tipográfica fluida (desktop e monitores 2K/4K) ═══════════════════
   Aplicada no container raiz da aplicação; os componentes consomem via var(). */
@media (min-width: 992px) {
  .app-page {
    --ui-xs: clamp(10px, .61vw, 15px);
    --ui-sm: clamp(12px, .72vw, 17px);
    --ui-md: clamp(14px, .85vw, 20px);
  }
}

/* ══ Keyframes ═══════════════════════════════════════════════════════════════ */
@keyframes enter      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes card-in    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes verdict-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pop        { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tv-enter   { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes shimmer    { to { transform: translateX(100%); } }
@keyframes pulse      { 50% { opacity: .5; } }
@keyframes float      { 50% { transform: translateY(-8px); } }
@keyframes road-run   { from { transform: translateX(120%); } to { transform: translateX(-420%); } }
@keyframes pulse-out  { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes value-changed {
  0%   { background: color-mix(in srgb, var(--brand) 22%, transparent); }
  100% { background: transparent; }
}

/* Movimento reduzido: o crítico continua se distinguindo por contorno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .verdict[data-status="critical"] .verdict-mark {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 35%, transparent);
  }
}