/* NYM4 Delivery — tokens do design system.
   Base copiada de C:\Dev\nym4-marca\tokens.css (paleta "Console", decidida em
   2026-11-10). Este arquivo só LÊ aquela fonte; nada em nym4-marca foi alterado.
   Abaixo da cópia da marca ficam os tokens semânticos específicos do app
   (superfícies, texto, espaço, movimento, estados de pedido) e as variáveis
   de tema por negócio, que public/js/tema.js sobrescreve em tempo de execução
   a partir de GET /api/negocio. */

:root {
  color-scheme: dark light;

  /* ---- cópia fiel de nym4-marca/tokens.css ---- */
  --nym4-noite: #070b16;
  --nym4-azul-fundo: #0e1530;
  --nym4-azul-borda: #1f2c66;
  --nym4-eletrico: #2f6bff;
  --nym4-ciano: #35e0ff;
  --nym4-gelo: #e8f0ff;

  --nym4-fonte-titulo: "Space Grotesk", Inter, system-ui, sans-serif;
  --nym4-fonte-texto: Inter, system-ui, sans-serif;
  --nym4-raio-icone: 22px;

  /* ---- tipografia (pilha de sistema; sem CDN, sem @font-face) ---- */
  --fonte-titulo: var(--nym4-fonte-titulo), -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-texto: var(--nym4-fonte-texto), -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;

  /* ---- superfícies (tema escuro é o padrão da direção "Console") ---- */
  --cor-fundo: var(--nym4-noite);
  --cor-fundo-elevado: #0b1128;
  --cor-superficie: var(--nym4-azul-fundo);
  --cor-superficie-alt: #141b3d;
  --cor-borda: var(--nym4-azul-borda);
  --cor-borda-sutil: rgba(53, 224, 255, 0.16);

  --cor-texto: var(--nym4-gelo);
  --cor-texto-suave: #a9b7e0;
  --cor-texto-fraco: #7784ad;

  --cor-primaria: var(--nym4-eletrico);
  --cor-primaria-contraste: #ffffff;
  --cor-secundaria: var(--nym4-ciano);
  --cor-secundaria-contraste: #04121a;

  --cor-foco: var(--nym4-ciano);
  --glow-foco: 0 0 0 3px rgba(53, 224, 255, 0.28), 0 0 24px rgba(53, 224, 255, 0.22);
  --sombra-cartao: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px rgba(2, 4, 12, 0.55);
  --sombra-flutuante: 0 16px 40px rgba(2, 4, 12, 0.6);

  /* ---- estados de pedido ---- */
  --estado-novo-texto: #6fd8ff;
  --estado-novo-fundo: rgba(53, 224, 255, 0.16);
  --estado-preparando-texto: #ffb020;
  --estado-preparando-fundo: rgba(255, 176, 32, 0.16);
  --estado-saiu-texto: #b3a4ff;
  --estado-saiu-fundo: rgba(155, 140, 255, 0.18);
  --estado-entregue-texto: #52e3a6;
  --estado-entregue-fundo: rgba(61, 220, 140, 0.16);
  --estado-cancelado-texto: #ff8a97;
  --estado-cancelado-fundo: rgba(255, 92, 114, 0.16);

  /* ---- espaço / raio / alvo de toque ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --raio-campo: 10px;
  --raio-cartao: 16px;
  --raio-painel: 20px;
  --raio-pill: 999px;
  --alvo-toque: 44px;

  /* ---- movimento (150–250ms, estilo Console/Apple) ---- */
  --dur-rapida: 150ms;
  --dur-media: 220ms;
  --dur-lenta: 320ms;
  --facil: cubic-bezier(0.22, 0.61, 0.36, 1);
  --facil-saida: cubic-bezier(0.4, 0, 1, 1);

  /* ---- tema do negócio (sobrescrito em runtime por public/js/tema.js
     a partir de GET /api/negocio; valores abaixo são o fallback "Console") ---- */
  --negocio-primaria: var(--cor-primaria);
  --negocio-secundaria: var(--cor-secundaria);
  --negocio-fundo: var(--cor-fundo);
  --negocio-texto-sobre-primaria: var(--cor-primaria-contraste);
  --negocio-texto-sobre-secundaria: var(--cor-secundaria-contraste);
}

/* ---- tema claro: mesma paleta Console, superfícies invertidas.
   Ativado por preferência do sistema ou por [data-tema="claro"] no <html>. ---- */
@media (prefers-color-scheme: light) {
  :root {
    --cor-fundo: #f3f5fc;
    --cor-fundo-elevado: #ffffff;
    --cor-superficie: #ffffff;
    --cor-superficie-alt: #e7ebf7;
    --cor-borda: #d4ddf2;
    --cor-borda-sutil: rgba(31, 68, 184, 0.16);

    --cor-texto: #0b1024;
    --cor-texto-suave: #45507a;
    --cor-texto-fraco: #6b74a0;

    --cor-primaria: #2458e6;
    --cor-primaria-contraste: #ffffff;
    --cor-secundaria: #0097b3;
    --cor-secundaria-contraste: #ffffff;

    --cor-foco: #0097b3;
    --glow-foco: 0 0 0 3px rgba(0, 151, 179, 0.22), 0 0 20px rgba(0, 151, 179, 0.16);
    --sombra-cartao: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px rgba(23, 33, 68, 0.12);
    --sombra-flutuante: 0 16px 36px rgba(23, 33, 68, 0.18);

    --estado-novo-texto: #0c6ea8;
    --estado-novo-fundo: #dff1fb;
    --estado-preparando-texto: #9a5a00;
    --estado-preparando-fundo: #fbe9cf;
    --estado-saiu-texto: #5b4bc4;
    --estado-saiu-fundo: #e8e4fb;
    --estado-entregue-texto: #0f7a4d;
    --estado-entregue-fundo: #dcf3e6;
    --estado-cancelado-texto: #b6243a;
    --estado-cancelado-fundo: #fbdfe3;
  }
}

html[data-tema="claro"] {
  --cor-fundo: #f3f5fc;
  --cor-fundo-elevado: #ffffff;
  --cor-superficie: #ffffff;
  --cor-superficie-alt: #e7ebf7;
  --cor-borda: #d4ddf2;
  --cor-borda-sutil: rgba(31, 68, 184, 0.16);
  --cor-texto: #0b1024;
  --cor-texto-suave: #45507a;
  --cor-texto-fraco: #6b74a0;
  --cor-primaria: #2458e6;
  --cor-primaria-contraste: #ffffff;
  --cor-secundaria: #0097b3;
  --cor-secundaria-contraste: #ffffff;
  --cor-foco: #0097b3;
  --glow-foco: 0 0 0 3px rgba(0, 151, 179, 0.22), 0 0 20px rgba(0, 151, 179, 0.16);
  --sombra-cartao: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px rgba(23, 33, 68, 0.12);
  --sombra-flutuante: 0 16px 36px rgba(23, 33, 68, 0.18);
  --estado-novo-texto: #0c6ea8;
  --estado-novo-fundo: #dff1fb;
  --estado-preparando-texto: #9a5a00;
  --estado-preparando-fundo: #fbe9cf;
  --estado-saiu-texto: #5b4bc4;
  --estado-saiu-fundo: #e8e4fb;
  --estado-entregue-texto: #0f7a4d;
  --estado-entregue-fundo: #dcf3e6;
  --estado-cancelado-texto: #b6243a;
  --estado-cancelado-fundo: #fbdfe3;
}

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

/* Fonte Inter (licença OFL) servida junto com o app, sem CDN. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: local("Inter"), url("../fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: local("Inter Medium"), url("../fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: local("Inter SemiBold"), url("../fonts/Inter-SemiBold.ttf") format("truetype"); }

/* Fonte Space Grotesk (títulos), licença OFL, servida junto do app. */
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Variable.ttf") format("truetype"); }