/* ============================================================
   COCKPIT — design/tokens.css (Entrega 1)
   Só variáveis + reset mínimo + utilitários de texto.
   Temas: [data-theme="dark|light"] (dark é o primário).
   Módulo: [data-modulo="pulso|batem|encanta|flui|maestro"].
   Densidade: [data-density="conforto|compacto"].
   ============================================================ */

/* ---------- Fonte: Inter variável, self-hosted ----------
   Baixar: https://rsms.me/inter/font-files/InterVariable.woff2
   Salvar como design/inter.woff2 (~48KB). Sem o arquivo o
   sistema cai em system-ui sem quebrar nada (zero CDN). */
@font-face {
  font-family: 'Inter';
  src: url('./inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Primitivas geradoras (lição Linear: 3 variáveis) ===== */
  --base-h: 250;   /* matiz do cinza (levemente frio) */
  --base-c: 0.012; /* croma do cinza */

  /* ===== Acento (default Pulso; sobrescrito por [data-modulo]) ===== */
  --acento: oklch(0.62 0.19 255);
  --acento-forte: color-mix(in oklab, var(--acento) 88%, black);
  --acento-suave: color-mix(in oklab, var(--acento) 12%, transparent);
  --acento-texto: oklch(0.99 0.01 255);

  /* ===== Semânticas fixas (iguais em todos os módulos) ===== */
  --ok:     oklch(0.68 0.17 150);
  --alerta: oklch(0.78 0.16 80);
  --erro:   oklch(0.62 0.21 25);
  --info:   oklch(0.68 0.14 230);
  --ok-suave:     color-mix(in oklab, var(--ok) 14%, transparent);
  --alerta-suave: color-mix(in oklab, var(--alerta) 16%, transparent);
  --erro-suave:   color-mix(in oklab, var(--erro) 14%, transparent);
  --info-suave:   color-mix(in oklab, var(--info) 14%, transparent);

  /* ===== Tipografia ===== */
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  --fonte-xs: 11px;   --linha-xs: 16px;
  --fonte-sm: 12.5px; --linha-sm: 18px;
  --fonte-base: 14px; --linha-base: 20px;
  --fonte-md: 16px;   --linha-md: 24px;
  --fonte-lg: 20px;   --linha-lg: 28px;
  --fonte-xl: 28px;   --linha-xl: 34px;

  /* ===== Espaçamento 4/8px ===== */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

  /* ===== Raios ===== */
  --raio-sm: 6px; --raio-md: 10px; --raio-lg: 16px; --raio-full: 999px;

  /* ===== Sombras ===== */
  --sombra-1: 0 1px 2px oklch(0 0 0 / 0.10);
  --sombra-2: 0 4px 12px oklch(0 0 0 / 0.14);
  --sombra-3: 0 12px 32px oklch(0 0 0 / 0.22);

  /* ===== Movimento (durações curtas — lição Linear) ===== */
  --dur-1: 80ms; --dur-2: 140ms; --dur-3: 200ms;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);

  /* ===== Densidade (conforto = default) ===== */
  --altura-controle: 32px;  /* botões, inputs em linha */
  --altura-input: 36px;
  --altura-linha: 44px;     /* linha de tabela */
  --pad-celula: var(--esp-3);

  /* ===== Shell ===== */
  --trilho-larg: 56px;
  --sidebar-larg: 240px;
  --topbar-alt: 48px;
  --painel-larg: 380px;
  --drawer-larg: 480px;

  /* ===== Respiro do conteúdo (R59: telas "encimadas" -> arejar) ===== */
  --leitura-larg: 1280px;      /* largura máx. de leitura confortável (antes: 1440px hardcoded no .c-conteudo) */
  --esp-secao: var(--esp-6);   /* ritmo vertical entre seções/blocos do conteúdo (antes: --esp-5) */
  --pad-conteudo: var(--esp-6);/* respiro externo da área de conteúdo (antes: --esp-5) */
  --pad-kpi: var(--esp-5);     /* padding interno dos cards KPI (antes: --esp-4) */
  --gap-kpi: var(--esp-5);     /* gap entre cards KPI (antes: --esp-4) */
}

/* ===== TEMA DARK (primário — também é o default sem atributo) ===== */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --fundo-0: oklch(0.16 var(--base-c) var(--base-h));
  --fundo-1: oklch(0.19 var(--base-c) var(--base-h));
  --fundo-2: oklch(0.23 var(--base-c) var(--base-h));
  --fundo-3: oklch(0.27 var(--base-c) var(--base-h));
  --texto-1: oklch(0.93 0.005 var(--base-h));
  --texto-2: oklch(0.72 0.008 var(--base-h));
  --texto-3: oklch(0.55 0.01 var(--base-h));
  --borda-1: oklch(0.30 var(--base-c) var(--base-h) / 0.7);
  --borda-2: oklch(0.36 var(--base-c) var(--base-h));
  --vidro:   oklch(0.19 var(--base-c) var(--base-h) / 0.78);
  --scrim:   oklch(0 0 0 / 0.5);
}

/* ===== TEMA LIGHT ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --fundo-0: oklch(0.975 0.003 var(--base-h));
  --fundo-1: oklch(1 0 0);
  --fundo-2: oklch(0.955 0.004 var(--base-h));
  --fundo-3: oklch(0.93 0.006 var(--base-h));
  --texto-1: oklch(0.25 0.01 var(--base-h));
  --texto-2: oklch(0.48 0.012 var(--base-h));
  --texto-3: oklch(0.62 0.01 var(--base-h));
  --borda-1: oklch(0.90 0.005 var(--base-h));
  --borda-2: oklch(0.82 0.008 var(--base-h));
  --vidro:   oklch(1 0 0 / 0.75);
  --scrim:   oklch(0 0 0 / 0.35);
}

/* ===== Acento por módulo ===== */
:root[data-modulo="pulso"]   { --acento: oklch(0.62 0.19 255); --acento-texto: oklch(0.99 0.01 255); } /* azul */
:root[data-modulo="batem"]   { --acento: oklch(0.64 0.17 155); --acento-texto: oklch(0.99 0.01 155); } /* verde */
:root[data-modulo="encanta"] { --acento: oklch(0.60 0.20 300); --acento-texto: oklch(0.99 0.01 300); } /* violeta */
:root[data-modulo="flui"]    { --acento: oklch(0.72 0.16 75);  --acento-texto: oklch(0.22 0.03 75);  } /* âmbar: texto escuro */
:root[data-modulo="maestro"] { --acento: oklch(0.58 0.02 var(--base-h)); --acento-texto: oklch(0.98 0.003 var(--base-h)); } /* grafite */

/* Cores fixas dos módulos (pro trilho — cada ícone tem a sua) */
:root {
  --mod-pulso:   oklch(0.62 0.19 255);
  --mod-batem:   oklch(0.64 0.17 155);
  --mod-encanta: oklch(0.60 0.20 300);
  --mod-flui:    oklch(0.72 0.16 75);
  --mod-maestro: oklch(0.58 0.02 var(--base-h));
}

/* ===== Densidade compacta (~25% menos) ===== */
:root[data-density="compacto"] {
  --altura-controle: 28px;
  --altura-input: 30px;
  --altura-linha: 36px;
  --pad-celula: var(--esp-2);
  --fonte-base: 13px; --linha-base: 18px;
}

/* ===== Reduced motion / transparency ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: var(--fundo-1); }
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fonte-base);
  line-height: var(--linha-base);
  font-feature-settings: 'cv05', 'cv11'; /* formas abertas do Inter */
  color: var(--texto-1);
  background: var(--fundo-0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-sm); }
::placeholder { color: var(--texto-3); }
::selection { background: var(--acento-suave); }

/* ============================================================
   Utilitários de texto
   ============================================================ */
.u-xs   { font-size: var(--fonte-xs);   line-height: var(--linha-xs); }
.u-sm   { font-size: var(--fonte-sm);   line-height: var(--linha-sm); }
.u-md   { font-size: var(--fonte-md);   line-height: var(--linha-md); }
.u-lg   { font-size: var(--fonte-lg);   line-height: var(--linha-lg); font-weight: 600; }
.u-xl   { font-size: var(--fonte-xl);   line-height: var(--linha-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-t2   { color: var(--texto-2); }
.u-t3   { color: var(--texto-3); }
.u-num  { font-variant-numeric: tabular-nums; }
.u-mono { font-family: var(--fonte-mono); font-size: var(--fonte-sm); }
.u-trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-500  { font-weight: 500; }
.u-600  { font-weight: 600; }