/*
 * Design system H1 Labs — fonte da verdade dos tokens.
 * Consumido por app/, menu/ e admin/. Hex fora deste arquivo é erro de lint.
 *
 * Regra que resolve os dois furos de contraste medidos no design system original:
 * cada cor tem par de uso separado. Token de PREENCHIMENTO não serve como cor de
 * TEXTO. primary-500 sobre o fundo da aplicação dá 4,43:1 (AA pede 4,5) e
 * warning sobre branco dá 3,64:1 — então texto usa primary-600 e warning-text.
 * O verificador em scripts/contrast.mjs falha o build se alguém reverter isso.
 */

:root {
  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-surface-muted: #f0efeb;
  --color-surface-inset: #eae8e2;
  --color-text: #171717;
  --color-text-secondary: #686661;
  --color-border: #e2e0da;
  --color-border-strong: #ccc9c0;
  /*
   * border e border-strong são divisores decorativos (isentos de 1.4.11).
   * Borda de controle interativo — input, select, checkbox — precisa de 3:1
   * contra o fundo, e nenhum dos dois alcança: border-strong dá 1,53:1.
   * Daí este token separado, verificado no contrast.mjs.
   */
  --color-border-interactive: #8a857a;

  --color-primary-50: #f5f1ea;
  --color-primary-100: #e9dfd0;
  --color-primary-500: #9a673d;
  --color-primary-600: #7e4f2e;
  --color-primary-700: #633d24;
  --color-primary-text: var(--color-primary-600);
  /* Fundo de item SELECIONADO ou sob o dedo — aba ativa, item de menu ativo,
     produto sendo tocado no PDV.
     Token próprio, e não `primary-50` direto, porque `primary-50` é o tom mais
     claro do accent do estabelecimento: ele serve a um fundo claro e continua
     claro no tema escuro. Usá-lo lá acendia um bloco branco-esverdeado no meio
     da barra escura — foi o que o dono viu no menu lateral. Aqui o escuro
     redefine este token derivando do MESMO accent contra a superfície escura,
     então a marca continua sendo a dele nos dois temas. */
  --color-primary-selecionado: var(--color-primary-50);
  --color-primary-border: transparent;
  --color-on-primary: #ffffff;
  /* Realce por cima de um preenchimento colorido (contador na barra de pedido,
     selo dentro de botão cheio). Translúcido de propósito: acompanha a cor de
     baixo em vez de exigir um token por combinação. */
  --color-sobre-preenchimento: rgb(255 255 255 / 0.22);

  --color-success: #287a4a;
  --color-success-text: #287a4a;
  --color-success-soft: #e6f1ea;
  --color-on-success: #ffffff;

  --color-warning: #b7791f;
  --color-warning-text: #8a5a12;
  --color-warning-soft: #fbf1de;
  --color-on-warning: #171717;

  --color-danger: #b33a3a;
  --color-danger-text: #b33a3a;
  --color-danger-soft: #f8e8e8;
  --color-on-danger: #ffffff;

  --color-info: #356d9a;
  --color-info-text: #356d9a;
  --color-info-soft: #e7eef5;
  --color-on-info: #ffffff;

  --color-offline: #6b6257;
  --color-offline-text: #6b6257;
  --color-offline-soft: #eeece7;
  --color-on-offline: #ffffff;

  --color-focus: #356d9a;
  /* Véu de modal e gaveta: rgba precisa existir em algum lugar, e o lugar é aqui. */
  --color-scrim: rgba(0, 0, 0, 0.45);

  /*
   * Painel de marca — login, escolha de estabelecimento e landing page. É a
   * única superfície escura fora do KDS, e precisa de tokens próprios: usar os
   * do KDS aqui amarraria a primeira tela do produto ao tema da cozinha, e
   * qualquer ajuste de legibilidade na tela do bar mudaria a tela de venda.
   * Os pares abaixo estão verificados em scripts/contrast.mjs.
   */
  --color-marca-base: #14120f;
  --color-marca-fundo-profundo: #0b0a09;
  --color-marca-elevada: #201c17;
  --color-marca-texto: #f7f6f3;
  --color-marca-texto-suave: #c3bbad;
  --color-marca-realce: #d9a273;
  --color-marca-linha: #3a332b;
  --color-marca-tracado: #9a8670;
  --color-marca-brilho: rgba(217, 162, 115, 0.16);
  /* Vidro do site: o texto fica sobre a cena 3D, e sem uma camada semitransparente
     a linha do desenho passa por dentro da letra. */
  --color-marca-vidro: rgba(28, 25, 21, 0.74);
  --color-marca-vidro-forte: rgba(11, 10, 9, 0.9);
  --color-marca-fio: rgba(217, 162, 115, 0.2);
  /* Véu do lado do texto no site: a cena é atmosfera, e onde tem letra ela
     precisa recuar. Não é vidro nem sombra de card — é gradiente com função. */
  --color-marca-veu-texto: rgba(11, 10, 9, 0.93);
  --color-marca-veu: rgba(20, 18, 15, 0.72);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-display: 2.75rem;
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-caption: 0.6875rem;
  --text-price-lg: 1.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-scale: 1;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

  --control-height: 2.5rem;
  --control-height-lg: 3rem;
  --touch-min: 44px;
  --sidebar-width: 240px;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * PDV: alvo grande e radius menor que o cardápio, como manda o design system.
 * Operação no balcão é dedo apressado, não mouse preciso.
 */
[data-density="pos"] {
  --control-height: 3rem;
  --control-height-lg: 3.75rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --text-body: 1.0625rem;
}

/* Backoffice pode ser denso — tabela longa é o caso comum. */
[data-density="compact"] {
  --control-height: 2.125rem;
  --space-4: 0.75rem;
  --space-6: 1rem;
  --text-body: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/*
 * Camadas de tema. O KDS não é paleta paralela: redefine só superfície e texto,
 * mantendo os mesmos nomes de token, para que o componente seja o mesmo nas duas
 * telas. Paleta separada seria manter dois design systems.
 *
 * Alvo de contraste no KDS é AAA (7:1), não AA: leitura a 2 metros, tela com
 * gordura, cozinha com luz forte.
 */
/*
 * A paleta escura é UMA, e serve a duas superfícies: o KDS da cozinha e o
 * painel do comerciante. Escrever uma segunda seria manter dois design systems
 * — e a do KDS já passou pela conferência de contraste.
 *
 * O que o KDS tem a mais está no bloco logo abaixo, e é só tipografia: leitura a
 * dois metros pede texto maior. O painel do dono é lido a meio metro, com a
 * mesma densidade da versão clara.
 */
[data-theme="kds"],
[data-theme="escuro"] {
  --color-bg: #12110f;
  --color-surface: #1c1a17;
  --color-surface-muted: #262320;
  --color-surface-inset: #0d0c0b;
  --color-text: #f7f6f3;
  --color-text-secondary: #b5afa4;
  --color-border: #332f2a;
  --color-border-strong: #4a453d;
  --color-border-interactive: #6e675c;

  /* Derivado do accent do estabelecimento, não fixo: é o mesmo verde (ou
     vermelho, ou azul) da marca, rebaixado contra a superfície escura. */
  --color-primary-selecionado: color-mix(in srgb, var(--color-primary-500) 20%, var(--color-surface));

  --color-primary-500: #c68a55;
  --color-primary-600: #d9a273;
  --color-primary-text: #e3b892;
  --color-on-primary: #12110f;

  --color-success: #3f9c64;
  --color-success-text: #7bd99b;
  --color-success-soft: #16281d;
  --color-on-success: #12110f;

  --color-warning: #c98f2a;
  --color-warning-text: #f0c063;
  --color-warning-soft: #2c2113;
  --color-on-warning: #12110f;

  --color-danger: #d46a6a;
  --color-danger-text: #f08a8a;
  --color-danger-soft: #2b1717;
  --color-on-danger: #12110f;

  --color-info: #4a86b8;
  --color-info-text: #8fc0e6;
  --color-info-soft: #16222c;
  --color-on-info: #12110f;

  --color-offline: #8b8175;
  --color-offline-text: #c0b7a9;
  --color-offline-soft: #201e1a;
  --color-on-offline: #12110f;

  --color-focus: #8fc0e6;
  --color-scrim: rgba(0, 0, 0, 0.7);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

}

/* Só o KDS: texto maior para leitura a dois metros, em tela de 32" com gordura. */
[data-theme="kds"] {
  --text-body: 1.125rem;
  --text-h2: 1.75rem;
}

/*
 * Reset mínimo e base tipográfica. Cada app importa este arquivo e nada mais
 * de cor: componente consome token, nunca hex.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(a) {
  color: var(--color-primary-text);
}

/* Foco visível é requisito de acessibilidade, não enfeite — nunca remover. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Alvo de toque mínimo no tablet do garçom. */
@media (pointer: coarse) {
  :where(button, a[role="button"], [role="tab"]) {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
}

/*
 * Camada do cardápio público — a superfície editorial.
 *
 * O cardápio é a única tela que um cliente do bar vê, e a única que precisa
 * parecer um restaurante em vez de um painel. Ela redefine as MESMAS variáveis
 * (neutros mais quentes, serifada para título e preço) em vez de inventar
 * paleta paralela — pelo mesmo motivo do KDS: componente é o mesmo, e duas
 * paletas divergem na primeira correção.
 *
 * O verde da prancheta NÃO está aqui. Ele é o accent do estabelecimento, que o
 * servidor deriva e valida por contraste (`internal/theme`), porque cada bar tem
 * a cor dele — fixar o verde do primeiro cliente no CSS faria o segundo cliente
 * receber o cardápio da concorrência.
 */
[data-surface="cardapio"] {
  --color-bg: #f7f3ec;
  --color-surface: #ffffff;
  --color-surface-muted: #f1ede4;
  --color-surface-inset: #ede7dc;
  --color-text: #16211c;
  --color-text-secondary: #77705f;
  --color-text-soft: #8a8271;
  --color-border: #e7e0d4;
  --color-border-strong: #ddd4c6;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: Archivo, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Raio e altura de toque da prancheta: campo 14–16, card 18–20, modal 24,
     CTA 58–64. O alvo de toque maior não é estética — é um cliente com uma mão
     no celular e a outra no copo. */
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --touch-min: 52px;
  --altura-cta: 58px;

  --shadow-sm: 0 1px 2px rgba(22, 33, 28, 0.05);
  --shadow-md: 0 10px 30px rgba(22, 33, 28, 0.08);
  --shadow-lg: 0 24px 60px rgba(22, 33, 28, 0.14);
  --color-scrim: rgba(22, 33, 28, 0.44);

  /* Camadas translúcidas por cima do cabeçalho pintado com o accent do
     estabelecimento. Derivadas de `--color-on-primary` com color-mix, e não
     branco fixo: o cabeçalho de um bar de accent claro tem texto escuro, e ali
     um véu branco sumiria. Assim as três seguem a cor que já foi validada
     contra o preenchimento. */
  --sobre-marca-campo: color-mix(in srgb, var(--color-on-primary) 10%, transparent);
  --sobre-marca-suave: color-mix(in srgb, var(--color-on-primary) 14%, transparent);
  --sobre-marca-linha: color-mix(in srgb, var(--color-on-primary) 24%, transparent);
}

/*
 * Camada do site institucional — a superfície da software house.
 *
 * A H1 Labs não vende um produto só: o Menu é um deles. O site fala da empresa
 * que constrói software sob medida, e por isso ele NÃO usa a paleta do produto
 * de bar. Vem da prancheta `H1Labs Site.dc.html`.
 *
 * Redefine os MESMOS tokens `--color-marca-*` em vez de inventar família nova,
 * pela razão de sempre: o `:root` desses tokens é o painel de login do app, e
 * mudar os valores lá repintaria a tela de entrada do produto. Aqui o escopo é
 * o atributo, então uma superfície não alcança a outra.
 *
 * Os níveis translúcidos NÃO estão listados um por um: o styles.css os deriva
 * com color-mix a partir de `--color-marca-texto` e `--color-marca-veu-base`,
 * com a porcentagem exata da prancheta. Vinte tokens de opacidade seriam vinte
 * nomes para decorar em troca de nada.
 */
[data-surface="site"] {
  --color-marca-fundo-profundo: #08090a;
  --color-marca-base: #0b0c0e;
  --color-marca-elevada: #101215;
  --color-marca-texto: #f2f2ef;
  --color-marca-texto-suave: #9d9d99;
  --color-marca-linha: #1b1d1f;
  --color-marca-tracado: #2b2e31;

  /* O accent da prancheta em oklch, e não no #7FE3DC equivalente: é o valor que
     está no CSS do design, e oklch mantém a luminosidade estável se o matiz
     mudar. A cena 3D lê este mesmo token com getComputedStyle — cor de canvas
     duplicada em JS é a que fica para trás na próxima troca de marca. */
  --color-marca-realce: oklch(0.82 0.12 196);

  /* A prancheta tem DOIS accents, e eles não são a mesma cor: o CSS usa o oklch
     acima (#4ddcdd em sRGB) e o material dos pontos da cena usa #7fe3dc — 50
     pontos de diferença no vermelho, um ciano firme na interface e um mais
     lavado no 3D. Unificar seria escolher por conta própria qual dos dois o
     designer errou; ficam os dois, cada um no seu uso. */
  --color-marca-realce-cena: #7fe3dc;

  /* Base das camadas translúcidas. Branco puro aqui é correto e não é hex
     solto: a superfície é escura em toda a página, sem variante clara, então
     não há caso em que o véu precise seguir outra cor. */
  --color-marca-veu-base: #ffffff;
  --color-marca-vidro: color-mix(in srgb, var(--color-marca-fundo-profundo) 72%, transparent);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Raios da prancheta: chip 8, botão de contato 14, grade de serviços 20,
     bloco de fecho 26. A pill de 999 é a mesma do sistema. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
}