/* ==========================================================================
   Brigada · tokens de design · v2.0 · 29/09/2026
   Fonte da verdade de cor, tipo, espaço, forma, sombra e movimento.

   Camadas:
   1. Primitivos de marca (Brasa, Carvão, Comanda, Inox, Gema) — do manual v1 (21/09/2026).
   2. Primitivos funcionais (sucesso, alerta, erro, info, gráficos) — NÃO são cores de marca.
   3. Tokens semânticos por tema (claro e escuro). Componente usa SÓ esta camada.

   Tema:
   - Sem atributo: segue o sistema operacional (prefers-color-scheme).
   - <html data-theme="light|dark">: forçado. O script brigada.js resolve a preferência
     da conta (sistema|claro|escuro) e escreve o atributo + a classe .dark (Tailwind).
   - data-theme também vale em qualquer elemento: um bloco pode mostrar o outro tema
     (usado no kit para comparar claro e escuro lado a lado).
   ========================================================================== */

:root {
  /* ---------- 1. Primitivos de marca ---------- */
  --brasa-50:  #FEF3EF;
  --brasa-100: #FDE3DA;
  --brasa-200: #FAC4B3;
  --brasa-300: #F59E85;
  --brasa-400: #F07152;
  --brasa-500: #EC4A27; /* cor da marca */
  --brasa-600: #C93A1B; /* botão com texto branco (5,1:1) */
  --brasa-700: #A32E17; /* link sobre fundo claro (6,2:1) */
  --brasa-800: #7F2413;
  --brasa-900: #5C1A0E;

  --carvao-950: #0E0C09;
  --carvao-900: #17140F; /* Carvão */
  --carvao-800: #221E18;
  --carvao-700: #2E2922;
  --carvao-600: #3D372F;
  --carvao-500: #57504A;
  --carvao-400: #7A736A;

  --comanda-50:  #FBF8F2;
  --comanda-100: #F5F0E6; /* Comanda */
  --comanda-200: #EBE3D6;
  --comanda-300: #DDD5C5;
  --comanda-400: #C7BEAD;

  --inox-300: #C9CDD1;
  --inox-500: #A7ADB2; /* Inox */
  --inox-700: #62676C; /* Inox escuro (manual v1): texto secundário no claro. 5,0:1 na Comanda e 5,7:1 no branco;
                         no fundo rebaixado (#EBE3D6) dá 4,49:1: ali o texto secundário usa --text-muted-sunken */

  --gema-100: #FCEFD2;
  --gema-500: #F2B33D; /* Gema: só conquista */
  --gema-700: #7A5200;

  --branco: #FFFFFF;

  /* ---------- 2. Primitivos funcionais (não são cor de marca) ---------- */
  --verde-100: #E2F1E6;  --verde-600: #2B7A4B;  --verde-400: #6CC593;  --verde-950: #10261A;
  --ocre-100:  #FBEFCF;  --ocre-700:  #875A00;  --ocre-300:  #F0C766;  --ocre-950:  #2E2208;
  --rubi-100:  #FBE3EA;  --rubi-600:  #B3234B;  --rubi-300:  #FF8FA8;  --rubi-950:  #36121D;
  --azul-100:  #E1EBF7;  --azul-600:  #2C62A0;  --azul-300:  #8FB9EA;  --azul-950:  #122238;

  /* Paleta categórica de gráfico (ordem fixa). Validada nos dois temas. */
  --chart-1: #EC4A27; /* Brasa */
  --chart-2: #2F8F83; /* petróleo */
  --chart-3: #F2B33D; /* Gema */
  --chart-4: #4C79B8; /* azul aço */
  --chart-5: #8C5AA8; /* ameixa */
  --chart-6: #7F9A3A; /* oliva */

  /* ---------- Tipografia ---------- */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40 → 64 */
  --fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);       /* 32 → 40 */
  --fs-h2: 1.75rem;   /* 28 */
  --fs-h3: 1.375rem;  /* 22 */
  --fs-h4: 1.125rem;  /* 18 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-md: 1rem;      /* 16 · texto padrão */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-xs: 0.75rem;   /* 12 */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.025em; /* títulos */
  --tracking-normal: 0;
  --tracking-over: 0.12em;    /* sobretítulo em caixa alta, 12 px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Espaço (grade de 4, ritmo de 8) ---------- */
  --sp-0: 0;
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Forma ---------- */
  --r-xs: 4px;   /* badge, checkbox, chip de tabela */
  --r-sm: 6px;   /* botão, campo, tab */
  --r-md: 8px;   /* card, menu, toast */
  --r-lg: 12px;  /* modal, drawer, painel */
  --r-xl: 16px;  /* bottom sheet, peça de marketing */
  --r-full: 999px; /* só avatar, toggle, ponto de status. Botão nunca é pílula. */

  --bw: 1px;
  --bw-strong: 2px;

  /* ---------- Tamanhos de controle ---------- */
  --ctl-sm: 32px;
  --ctl-md: 40px;
  --ctl-lg: 48px;  /* padrão no celular e em ação principal */
  --ctl-xl: 56px;
  --touch-min: 44px;     /* mínimo em tudo */
  --touch-team: 48px;    /* app da equipe (celular no turno) */
  --touch-kitchen: 56px; /* modo cozinha (tablet fixo) */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* ---------- Layout ----------
     Tamanhos de tela (media query não lê variável: os números ficam aqui só como referência)
       celular  < 768 px     topbar compacta 56 + bottom nav; menu completo em drawer; 1 coluna, margem 16
       tablet   768–1199 px  trilho .b-rail de 72 (ícone + rótulo curto); sem bottom nav; o "Menu" do trilho
                             abre o menu completo por cima. Retrato 768–1023, paisagem 1024–1199. 2 colunas, margem 24
       PC       ≥ 1200 px    sidebar completa 264; até 3–4 colunas; conteúdo até 1200
     O brigada.css mede pela largura do .b-shell (container query); fora dele, pela largura da tela.
     No JS: matchMedia("(min-width: 768px)") = tablet ou maior; ("(min-width: 1200px)") = PC. */
  --container: 1200px;
  --container-narrow: 720px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --rail-w: 72px;         /* trilho do tablet */
  --topbar-h: 64px;
  --topbar-h-compact: 56px; /* celular */
  --bottomnav-h: 64px;

  /* ---------- Camadas ---------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* ---------- Movimento ---------- */
  --dur-instant: 80ms;   /* press, troca de cor em ícone */
  --dur-fast: 140ms;     /* hover, focus, toggle */
  --dur-base: 200ms;     /* dropdown, tooltip, tab */
  --dur-slow: 320ms;     /* modal, drawer, toast */
  --dur-slower: 480ms;   /* entrada de página, gráfico */
  --dur-hero: 900ms;     /* contagem de KPI, acender da marca */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);       /* padrão para quase tudo */
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);     /* entrar: chega rápido, assenta devagar */
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);      /* sair: acelera para fora */
  --ease-brasa: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
                0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
                1.001 85.9%, 1); /* mola curta: confirmação, conquista, "brigada!" */

  --stagger: 40ms; /* atraso entre itens de lista na entrada */
  --lift: -2px;    /* deslocamento de hover em card clicável */
}

/* ==========================================================================
   3. Tokens semânticos · TEMA CLARO (padrão)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--comanda-100);            /* fundo da página */
  --bg-sunken: var(--comanda-200);     /* trilho, área de fundo de tabela, input desativado */
  --surface: var(--comanda-50);        /* card, painel, modal */
  --surface-2: var(--branco);          /* card dentro de card, menu */
  --surface-hover: var(--comanda-200);
  --surface-inverse: var(--carvao-900);
  --overlay: rgb(23 20 15 / 0.48);

  --text: var(--carvao-900);
  --text-muted: var(--inox-700);
  --text-muted-sunken: var(--carvao-500); /* texto secundário sobre --bg-sunken: 6,2:1 */
  --text-subtle: var(--carvao-400);
  --text-inverse: var(--comanda-100);
  --text-on-action: var(--branco);

  --border: var(--comanda-300);
  --border-strong: var(--comanda-400);
  --border-input: #B3AA99;             /* 3:1 contra --surface para campo de formulário */

  --action: var(--brasa-600);
  --action-hover: var(--brasa-700);
  --action-press: var(--brasa-800);
  --action-soft: var(--brasa-50);
  --action-soft-hover: var(--brasa-100);
  --on-action-soft: var(--brasa-700);
  --link: var(--brasa-700);
  --brand: var(--brasa-500);           /* grafismo, ícone de destaque, título grande */

  --neutral-btn: var(--carvao-900);    /* botão secundário (contorno) */

  --focus-ring: var(--carvao-900);
  --focus-ring-offset: var(--bg);

  --success: var(--verde-600);   --success-soft: var(--verde-100);
  --warning: var(--ocre-700);    --warning-soft: var(--ocre-100);
  --danger:  var(--rubi-600);    --danger-soft:  var(--rubi-100);   --danger-solid: var(--rubi-600);
  --info:    var(--azul-600);    --info-soft:    var(--azul-100);
  --on-status: var(--branco);       /* check, ícone ou texto sobre verde/ocre/rubi sólido */

  --gema: var(--gema-500);
  --gema-soft: var(--gema-100);
  --on-gema-soft: var(--gema-700);

  --skeleton: var(--comanda-200);
  --skeleton-shine: var(--comanda-50);

  --chart-grid: var(--comanda-300);
  --chart-axis: var(--inox-700);
  --chart-ink: var(--carvao-900);

  --shadow-xs: 0 1px 2px rgb(23 20 15 / 0.06);
  --shadow-sm: 0 1px 3px rgb(23 20 15 / 0.08), 0 1px 2px rgb(23 20 15 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(23 20 15 / 0.12), 0 2px 4px rgb(23 20 15 / 0.05);
  --shadow-lg: 0 16px 40px -8px rgb(23 20 15 / 0.20), 0 4px 10px rgb(23 20 15 / 0.06);
  --shadow-action: 0 6px 18px -6px rgb(201 58 27 / 0.55);
  --glow-brasa: 0 0 0 6px rgb(236 74 39 / 0.16);

  --divisa-gigante: var(--comanda-200); /* grafismo tom sobre tom */
  --divisa-brasa: #DC4323;              /* sobre Brasa (manual v1); .b-divisa-bg--brasa e .b-card--brand */
  --divisa-card: var(--comanda-200);    /* dentro de .b-card: um passo do --surface */
  --avatar-bg: var(--carvao-700);       /* avatar de iniciais */
  --logo-flame: var(--brasa-500);
  --logo-chev: var(--carvao-900);
  --logo-name: var(--carvao-900);
}

/* ==========================================================================
   3. Tokens semânticos · TEMA ESCURO
   Aplicado quando o sistema pede escuro e ninguém forçou claro,
   ou quando <html data-theme="dark">.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--carvao-900);
    --bg-sunken: var(--carvao-950);
    --surface: var(--carvao-800);
    --surface-2: var(--carvao-700);
    --surface-hover: var(--carvao-700);
    --surface-inverse: var(--comanda-100);
    --overlay: rgb(8 7 5 / 0.64);
    --text: var(--comanda-100);
    --text-muted: var(--inox-500);
    --text-muted-sunken: var(--inox-500);
    --text-subtle: #9A9288; /* placeholder: 4,7:1 sobre --surface-2 (carvao-400 dava 3,1:1) */
    --text-inverse: var(--carvao-900);
    --text-on-action: var(--branco);
    --border: var(--carvao-600);
    --border-strong: var(--carvao-500);
    --border-input: #6E665C;
    --action: var(--brasa-600);
    --action-hover: #D9421F;
    --action-press: var(--brasa-700);
    --action-soft: #3A1B12;
    --action-soft-hover: #4A2216;
    --on-action-soft: var(--brasa-300);
    --link: var(--brasa-400);
    --brand: var(--brasa-500);
    --neutral-btn: var(--comanda-100);
    --focus-ring: var(--gema-500);
    --focus-ring-offset: var(--bg);
    --success: var(--verde-400);   --success-soft: var(--verde-950);
    --warning: var(--ocre-300);    --warning-soft: var(--ocre-950);
    --danger:  var(--rubi-300);    --danger-soft:  var(--rubi-950);   --danger-solid: #C42A55;
    --info:    var(--azul-300);    --info-soft:    var(--azul-950);
    --on-status: var(--carvao-900);   /* no escuro os status são claros: check escuro */
    --gema: var(--gema-500);
    --gema-soft: #3A2C10;
    --on-gema-soft: var(--gema-500);
    --skeleton: var(--carvao-700);
    --skeleton-shine: var(--carvao-600);
    --chart-grid: var(--carvao-600);
    --chart-axis: var(--inox-500);
    --chart-ink: var(--comanda-100);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45);
    --shadow-md: 0 8px 20px -6px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 18px 44px -10px rgb(0 0 0 / 0.7);
    --shadow-action: 0 6px 20px -6px rgb(236 74 39 / 0.55);
    --glow-brasa: 0 0 0 6px rgb(236 74 39 / 0.22);
    --divisa-gigante: var(--carvao-800); /* sobre Carvão: #221E18 (manual v1) */
    --divisa-brasa: #DC4323;
    --divisa-card: var(--carvao-700);    /* no card o fundo já é carvao-800: a divisa sobe um passo */
    --avatar-bg: var(--carvao-500); /* carvao-700 some sobre --surface-2 */
    --logo-flame: var(--brasa-500);
    --logo-chev: var(--comanda-100);
    --logo-name: var(--comanda-100);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--carvao-900);
  --bg-sunken: var(--carvao-950);
  --surface: var(--carvao-800);
  --surface-2: var(--carvao-700);
  --surface-hover: var(--carvao-700);
  --surface-inverse: var(--comanda-100);
  --overlay: rgb(8 7 5 / 0.64);
  --text: var(--comanda-100);
  --text-muted: var(--inox-500);
  --text-muted-sunken: var(--inox-500);
  --text-subtle: #9A9288;
  --text-inverse: var(--carvao-900);
  --text-on-action: var(--branco);
  --border: var(--carvao-600);
  --border-strong: var(--carvao-500);
  --border-input: #6E665C;
  --action: var(--brasa-600);
  --action-hover: #D9421F;
  --action-press: var(--brasa-700);
  --action-soft: #3A1B12;
  --action-soft-hover: #4A2216;
  --on-action-soft: var(--brasa-300);
  --link: var(--brasa-400);
  --brand: var(--brasa-500);
  --neutral-btn: var(--comanda-100);
  --focus-ring: var(--gema-500);
  --focus-ring-offset: var(--bg);
  --success: var(--verde-400);   --success-soft: var(--verde-950);
  --warning: var(--ocre-300);    --warning-soft: var(--ocre-950);
  --danger:  var(--rubi-300);    --danger-soft:  var(--rubi-950);   --danger-solid: #C42A55;
  --info:    var(--azul-300);    --info-soft:    var(--azul-950);
  --on-status: var(--carvao-900);   /* no escuro os status são claros: check escuro */
  --gema: var(--gema-500);
  --gema-soft: #3A2C10;
  --on-gema-soft: var(--gema-500);
  --skeleton: var(--carvao-700);
  --skeleton-shine: var(--carvao-600);
  --chart-grid: var(--carvao-600);
  --chart-axis: var(--inox-500);
  --chart-ink: var(--comanda-100);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45);
  --shadow-md: 0 8px 20px -6px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 18px 44px -10px rgb(0 0 0 / 0.7);
  --shadow-action: 0 6px 20px -6px rgb(236 74 39 / 0.55);
  --glow-brasa: 0 0 0 6px rgb(236 74 39 / 0.22);
  --divisa-gigante: var(--carvao-800);
  --divisa-brasa: #DC4323;
  --divisa-card: var(--carvao-700);
  --avatar-bg: var(--carvao-500);
  --logo-flame: var(--brasa-500);
  --logo-chev: var(--comanda-100);
  --logo-name: var(--comanda-100);
}

/* Quem pediu menos movimento no aparelho: tudo vira instantâneo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
    --dur-hero: 0ms;
    --stagger: 0ms;
    --lift: 0px;
  }
}