/* Tokens visuais compartilhados. Estilo de modulo usa estas variaveis em vez de
   introduzir paleta propria.

   Bloco 1 — tokens legados (--bg ... --radius): consumidos pelas telas atuais.
   Os valores sao FIXOS: test/design-kit.test.js e test/theme.test.js os vigiam,
   porque cada tela antiga mede larguras e contraste em cima deles.

   Bloco 2 — padrao de design v2 (--gt-*): a escala lida por public/kit.css e
   pelas telas novas (docs/DESIGN.md). Definido em :root (tema escuro) e
   redefinido em html[data-theme="light"]; o kit nao tem uma regra [data-theme]
   sequer. Tela antiga que adotar um componente do kit re-aponta os tokens no
   proprio ancora (ex.: .pedidos-page { --gt-accent: var(--pedidos-accent); }). */

/* Inter variavel, auto-hospedada (public/fonts/, licenca OFL em LICENSE-Inter.txt).
   Baixa so quando um elemento a usa — hoje, apenas body.gt-page. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #20283a;
  --surface: #071422;
  --surface-2: #0d1d30;
  --surface-3: #12283f;
  --panel: #f7fbff;
  --panel-2: #ffffff;
  --ink: #edf6ff;
  --ink-dark: #101828;
  --muted: #8da2b9;
  --muted-dark: #64748b;
  --line: rgba(148, 163, 184, 0.24);
  --line-light: #d8e4f0;
  --purple: #7c5cff;
  --cyan: #22c7f2;
  --green: #2dd4a3;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 8px;
  color-scheme: dark;

  /* ---- Padrao v2 (--gt-*), tema escuro ---------------------------------- */

  /* Superficies: fundo da pagina e tres degraus acima dele. */
  --gt-bg: #0b1220;
  --gt-surface: #111a2b;
  --gt-surface-2: #172236;
  --gt-surface-3: #1d2a42;
  --gt-line: rgba(148, 163, 184, 0.16);
  --gt-line-strong: rgba(148, 163, 184, 0.28);

  /* Texto: os tres passam de 4,5:1 sobre qualquer superficie acima. */
  --gt-ink: #e6edf7;
  --gt-ink-2: #c3cfe0;
  --gt-muted: #8b9bb4;

  /* Acento (azul da marca). `accent` e preenchimento (botao primario, chip
     ativo) e leva `on-accent`; `accent-text` e o mesmo azul como TEXTO ou
     icone sobre superficie — no escuro precisa ser mais claro para ler. */
  --gt-accent: #2563eb;
  --gt-accent-hover: #1d4ed8;
  --gt-on-accent: #ffffff;
  --gt-accent-text: #8ab4ff;
  --gt-accent-soft: rgba(37, 99, 235, 0.16);
  --gt-accent-line: rgba(37, 99, 235, 0.45);

  /* Semantica: mesmo trio por tom — preenchimento, texto sobre superficie,
     lavagem de fundo (badge, alerta) — e `on-*` para o preenchimento. */
  --gt-success: #15803d;
  --gt-success-text: #4ade80;
  --gt-success-soft: rgba(74, 222, 128, 0.14);
  --gt-on-success: #ffffff;
  --gt-warning: #b45309;
  --gt-warning-text: #fbbf24;
  --gt-warning-soft: rgba(251, 191, 36, 0.14);
  --gt-on-warning: #ffffff;
  --gt-danger: #dc2626;
  --gt-danger-text: #f87171;
  --gt-danger-soft: rgba(248, 113, 113, 0.14);
  --gt-on-danger: #ffffff;
  --gt-info: var(--gt-accent);
  --gt-info-text: var(--gt-accent-text);
  --gt-info-soft: var(--gt-accent-soft);
  --gt-on-info: var(--gt-on-accent);

  /* Raio: um valor por papel. sm = controle e chip; md = cartao, popover e
     pastilha; lg = dialogo; full = pilula. */
  --gt-radius-sm: 6px;
  --gt-radius-md: 10px;
  --gt-radius-lg: 14px;
  --gt-radius-full: 999px;

  /* Sombra: no escuro o fio faz o trabalho; a sombra so separa camadas. */
  --gt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --gt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --gt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

  /* Espaco em multiplos de 4. */
  --gt-space-1: 4px;
  --gt-space-2: 8px;
  --gt-space-3: 12px;
  --gt-space-4: 16px;
  --gt-space-5: 20px;
  --gt-space-6: 24px;
  --gt-space-8: 32px;
  --gt-space-12: 48px;

  /* Tipografia: base densa de 13px; h1 de pagina em 18px. Pesos 400 a 700. */
  --gt-font-sans: "Inter Variable", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --gt-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --gt-text-xs: 11px;
  --gt-text-sm: 12px;
  --gt-text-md: 13px;
  --gt-text-lg: 14px;
  --gt-text-xl: 16px;
  --gt-text-2xl: 18px;
  --gt-text-3xl: 22px;
  --gt-text-4xl: 28px;
  /* Display: so numero de destaque em cartao de KPI (relatorio do cliente);
     nunca texto corrido nem titulo. */
  --gt-text-display: 40px;
  --gt-leading: 1.4;

  /* Altura de controle: 32px no desktop (28 para chip e botao pequeno); com
     toque grosso tudo vira alvo de 40px, o minimo do checklist. */
  --gt-control-sm: 28px;
  --gt-control: 32px;
  --gt-control-lg: 40px;

  /* Icone: 16 dentro de controle e linha, 20 em cabecalho e toolbar, 24 em
     estado vazio. 12 so dentro de badge e chip. */
  --gt-icon-sm: 16px;
  --gt-icon: 20px;
  --gt-icon-lg: 24px;
  --gt-stroke: 1.75;

  /* Movimento curto; prefers-reduced-motion zera (kit.css). */
  --gt-motion-fast: 120ms;
  --gt-motion: 160ms;
  --gt-motion-slow: 220ms;
  --gt-motion-spin: 800ms;
  --gt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Camadas. <dialog> e top layer e nao precisa de z-index. */
  --gt-z-sticky: 10;
  --gt-z-popover: 100;
  --gt-z-toast: 130;

  /* Anel de foco, so em :focus-visible. */
  --gt-focus-ring: 0 0 0 2px var(--gt-bg), 0 0 0 4px var(--gt-accent);
}

@media (pointer: coarse) {
  :root {
    --gt-control-sm: 40px;
    --gt-control: 40px;
    --gt-control-lg: 44px;
  }
}

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

html[data-theme="light"] {
  --bg: #dbe7ef;
  --surface: #ffffff;
  --surface-2: #edf5f9;
  --surface-3: #d9eaf3;
  --panel: #f7fbff;
  --panel-2: #ffffff;
  --ink: #102a43;
  --ink-dark: #102a43;
  --muted: #48677c;
  --muted-dark: #48677c;
  --line: rgba(11, 73, 110, 0.28);
  --line-light: #b8cfde;
  --purple: #0877aa;
  --cyan: #007da8;
  --green: #14866d;
  --warning: #b86900;
  --danger: #c73545;
  color-scheme: light;

  /* ---- Padrao v2 (--gt-*), tema claro ----------------------------------- */
  --gt-bg: #f5f7fb;
  --gt-surface: #ffffff;
  --gt-surface-2: #f1f4f9;
  --gt-surface-3: #e8edf5;
  --gt-line: rgba(15, 23, 42, 0.1);
  --gt-line-strong: rgba(15, 23, 42, 0.18);

  --gt-ink: #0f172a;
  --gt-ink-2: #334155;
  --gt-muted: #5b6b82;

  --gt-accent: #2563eb;
  --gt-accent-hover: #1d4ed8;
  --gt-on-accent: #ffffff;
  --gt-accent-text: #1d4ed8;
  --gt-accent-soft: rgba(37, 99, 235, 0.1);
  --gt-accent-line: rgba(37, 99, 235, 0.35);

  --gt-success: #15803d;
  --gt-success-text: #166534;
  --gt-success-soft: rgba(21, 128, 61, 0.12);
  --gt-on-success: #ffffff;
  --gt-warning: #b45309;
  --gt-warning-text: #92400e;
  --gt-warning-soft: rgba(180, 83, 9, 0.12);
  --gt-on-warning: #ffffff;
  --gt-danger: #dc2626;
  --gt-danger-text: #b91c1c;
  --gt-danger-soft: rgba(220, 38, 38, 0.1);
  --gt-on-danger: #ffffff;

  --gt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --gt-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --gt-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
}