/* ─────────────────────────────────────────────────────────────────────
   tokens.css — fundação visual do dfe-manifesta

   Direção: console de expedição fiscal com acabamento de produto.
   Base de azul-petróleo do protótipo DFe Manager, degradês vindos da
   referência de layout, e densidade alta preservada onde os dados vivem.

   Regra de uso do degradê: ele mora na moldura (trilho lateral, faixa
   de indicadores, botão primário). NUNCA atrás de tabela ou de texto
   corrido — ali ele custa legibilidade e não devolve nada.

   Regra estrutural: nenhuma cor nasce dentro de @media ou [data-theme].
   O :root define a paleta clara inteira; os outros dois blocos apenas
   REDEFINEM tokens. Componente nenhum escreve cor.
   ───────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── Superfícies ─────────────────────────────────────────────────── */
  --background: oklch(0.975 0.005 240);
  --card: oklch(1 0 0);
  --muted: oklch(0.955 0.006 245);
  --elevado: oklch(1 0 0);

  /* ── Tinta ───────────────────────────────────────────────────────── */
  --foreground: oklch(0.24 0.024 250);
  --muted-fg: oklch(0.52 0.024 250);

  /* ── Traço ───────────────────────────────────────────────────────── */
  --border: oklch(0.905 0.008 245);
  --border-suave: oklch(0.945 0.006 245);

  /* ── Marca ───────────────────────────────────────────────────────── */
  --primary: oklch(0.42 0.09 252);
  --primary-forte: oklch(0.32 0.075 250);
  --primary-fg: oklch(0.985 0.005 240);
  --accent: oklch(0.62 0.105 195);
  --accent-fg: oklch(0.16 0.03 200);

  /* ── Trilho lateral ──────────────────────────────────────────────── */
  --sidebar-fg: oklch(0.9 0.012 245);
  --sidebar-fg-suave: oklch(0.72 0.02 245);
  --sidebar-ativo: oklch(1 0 0 / 0.12);
  --sidebar-hover: oklch(1 0 0 / 0.06);

  /* ── Degradês ────────────────────────────────────────────────────── */
  --grad-sidebar: linear-gradient(
    170deg,
    oklch(0.3 0.05 250) 0%,
    oklch(0.24 0.045 252) 55%,
    oklch(0.2 0.04 255) 100%
  );
  --grad-faixa: linear-gradient(
    115deg,
    oklch(0.34 0.075 252) 0%,
    oklch(0.42 0.095 245) 45%,
    oklch(0.46 0.085 220) 100%
  );
  --grad-primario: linear-gradient(
    135deg,
    oklch(0.46 0.1 250) 0%,
    oklch(0.38 0.09 245) 100%
  );
  /* Luz ambiente da página: quase imperceptível, só tira o achatado. */
  --grad-pagina: radial-gradient(
    1200px 420px at 78% -12%,
    oklch(0.62 0.09 235 / 0.1) 0%,
    transparent 70%
  );
  --grad-brilho: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.14) 0%,
    transparent 60%
  );

  /* ── Semântica: significado, nunca decoração ─────────────────────── */
  --success: oklch(0.55 0.115 155);
  --warning: oklch(0.72 0.145 72);
  --warning-ink: oklch(0.42 0.1 72);
  --destructive: oklch(0.552 0.196 25);
  --info: oklch(0.55 0.095 250);

  --wash-success: color-mix(in oklab, var(--success) 14%, white);
  --wash-warning: color-mix(in oklab, var(--warning) 20%, white);
  --wash-destructive: color-mix(in oklab, var(--destructive) 13%, white);
  --wash-accent: color-mix(in oklab, var(--accent) 14%, white);
  --wash-info: color-mix(in oklab, var(--info) 13%, white);

  /* ── Tipografia ──────────────────────────────────────────────────── */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  /* Inter, nao monoespacada: o zero do IBM Plex Mono e cortado, e num
     painel fiscal isso lido rapido vira ruido. Inter tem algarismo
     tabular de verdade (tnum) e zero limpo, entao a coluna continua
     alinhada sem o corte. */
  --font-dado: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  --txt-xs: 11px;
  --txt-sm: 12.5px;
  --txt-md: 14px;
  --txt-lg: 17px;
  --txt-xl: 22px;
  --txt-2xl: 32px;
  --txt-figura: 34px;
  --tracking-rotulo: 0.14em;
  --tracking-titulo: -0.03em;

  /* ── Espaço e forma ──────────────────────────────────────────────── */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 40px;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --sombra: 0 1px 2px oklch(0.3 0.03 250 / 0.05),
            0 6px 20px oklch(0.3 0.03 250 / 0.06);
  --sombra-alta: 0 2px 6px oklch(0.3 0.03 250 / 0.08),
                 0 20px 48px oklch(0.3 0.03 250 / 0.16);
  --sombra-faixa: 0 10px 30px oklch(0.3 0.06 250 / 0.28);

  --foco: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* Escuro por preferência do sistema, guardado para que uma escolha
   explícita de tema claro vença o SO. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --background: oklch(0.175 0.022 250);
    --card: oklch(0.225 0.024 250);
    --muted: oklch(0.27 0.022 250);
    --elevado: oklch(0.245 0.026 250);

    --foreground: oklch(0.945 0.008 245);
    --muted-fg: oklch(0.7 0.018 250);

    --border: oklch(0.315 0.02 250);
    --border-suave: oklch(0.265 0.018 250);

    --primary: oklch(0.62 0.1 250);
    --primary-forte: oklch(0.52 0.09 250);
    --primary-fg: oklch(0.14 0.02 250);
    --accent: oklch(0.72 0.105 195);
    --accent-fg: oklch(0.15 0.03 200);

    --sidebar-fg: oklch(0.9 0.012 245);
    --sidebar-fg-suave: oklch(0.66 0.02 245);
    --sidebar-ativo: oklch(1 0 0 / 0.14);
    --sidebar-hover: oklch(1 0 0 / 0.07);

    --grad-sidebar: linear-gradient(
      170deg,
      oklch(0.225 0.035 252) 0%,
      oklch(0.185 0.03 254) 55%,
      oklch(0.155 0.025 256) 100%
    );
    --grad-faixa: linear-gradient(
      115deg,
      oklch(0.28 0.06 252) 0%,
      oklch(0.34 0.075 245) 45%,
      oklch(0.36 0.07 218) 100%
    );
    --grad-primario: linear-gradient(
      135deg,
      oklch(0.6 0.1 250) 0%,
      oklch(0.5 0.09 245) 100%
    );
    --grad-pagina: radial-gradient(
      1200px 420px at 78% -12%,
      oklch(0.6 0.1 235 / 0.14) 0%,
      transparent 70%
    );
    --grad-brilho: linear-gradient(
      180deg,
      oklch(1 0 0 / 0.08) 0%,
      transparent 60%
    );

    --success: oklch(0.72 0.12 155);
    --warning: oklch(0.8 0.13 72);
    --warning-ink: oklch(0.86 0.1 72);
    --destructive: oklch(0.7 0.15 25);
    --info: oklch(0.7 0.085 250);

    --wash-success: color-mix(in oklab, var(--success) 20%, oklch(0.225 0.024 250));
    --wash-warning: color-mix(in oklab, var(--warning) 20%, oklch(0.225 0.024 250));
    --wash-destructive: color-mix(in oklab, var(--destructive) 20%, oklch(0.225 0.024 250));
    --wash-accent: color-mix(in oklab, var(--accent) 18%, oklch(0.225 0.024 250));
    --wash-info: color-mix(in oklab, var(--info) 18%, oklch(0.225 0.024 250));

    --sombra: 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 20px oklch(0 0 0 / 0.3);
    --sombra-alta: 0 2px 6px oklch(0 0 0 / 0.45), 0 20px 48px oklch(0 0 0 / 0.5);
    --sombra-faixa: 0 10px 30px oklch(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: oklch(0.175 0.022 250);
  --card: oklch(0.225 0.024 250);
  --muted: oklch(0.27 0.022 250);
  --elevado: oklch(0.245 0.026 250);

  --foreground: oklch(0.945 0.008 245);
  --muted-fg: oklch(0.7 0.018 250);

  --border: oklch(0.315 0.02 250);
  --border-suave: oklch(0.265 0.018 250);

  --primary: oklch(0.62 0.1 250);
  --primary-forte: oklch(0.52 0.09 250);
  --primary-fg: oklch(0.14 0.02 250);
  --accent: oklch(0.72 0.105 195);
  --accent-fg: oklch(0.15 0.03 200);

  --sidebar-fg: oklch(0.9 0.012 245);
  --sidebar-fg-suave: oklch(0.66 0.02 245);
  --sidebar-ativo: oklch(1 0 0 / 0.14);
  --sidebar-hover: oklch(1 0 0 / 0.07);

  --grad-sidebar: linear-gradient(
    170deg,
    oklch(0.225 0.035 252) 0%,
    oklch(0.185 0.03 254) 55%,
    oklch(0.155 0.025 256) 100%
  );
  --grad-faixa: linear-gradient(
    115deg,
    oklch(0.28 0.06 252) 0%,
    oklch(0.34 0.075 245) 45%,
    oklch(0.36 0.07 218) 100%
  );
  --grad-primario: linear-gradient(
    135deg,
    oklch(0.6 0.1 250) 0%,
    oklch(0.5 0.09 245) 100%
  );
  --grad-pagina: radial-gradient(
    1200px 420px at 78% -12%,
    oklch(0.6 0.1 235 / 0.14) 0%,
    transparent 70%
  );
  --grad-brilho: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.08) 0%,
    transparent 60%
  );

  --success: oklch(0.72 0.12 155);
  --warning: oklch(0.8 0.13 72);
  --warning-ink: oklch(0.86 0.1 72);
  --destructive: oklch(0.7 0.15 25);
  --info: oklch(0.7 0.085 250);

  --wash-success: color-mix(in oklab, var(--success) 20%, oklch(0.225 0.024 250));
  --wash-warning: color-mix(in oklab, var(--warning) 20%, oklch(0.225 0.024 250));
  --wash-destructive: color-mix(in oklab, var(--destructive) 20%, oklch(0.225 0.024 250));
  --wash-accent: color-mix(in oklab, var(--accent) 18%, oklch(0.225 0.024 250));
  --wash-info: color-mix(in oklab, var(--info) 18%, oklch(0.225 0.024 250));

  --sombra: 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 20px oklch(0 0 0 / 0.3);
  --sombra-alta: 0 2px 6px oklch(0 0 0 / 0.45), 0 20px 48px oklch(0 0 0 / 0.5);
  --sombra-faixa: 0 10px 30px oklch(0 0 0 / 0.45);
}

/* ── Base ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Qualquer classe que declare display vence o [hidden] do navegador —
   mesma especificidade, e a nossa folha vem depois. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: var(--txt-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Todo dado real — chave, CNPJ, NSU, valor, data — com dígitos de
   largura fixa. Em app fiscal isso é leitura, não estética: número
   desalinhado se lê errado.

   tnum dá a largura fixa; lnum garante algarismo de caixa alta, que é o
   que alinha com maiúsculas e com o resto da tabela. O zero fica limpo,
   sem corte — o corte só existe para desambiguar de "O" em terminal, e
   aqui não há letra no meio de número. */
.num {
  font-family: var(--font-dado);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.005em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}