/* ══════════════════════════════════════════════════════════
   MEU VUCAFOOD: TOKENS (design system do painel do lojista)

   Painel B2B, uso em desktop e celular, telas de cadastro e lista.
   Direcao fechada em 07/11/2026 (Luciano): chrome neutro claro, o
   vermelho da marca VucaFood (#ff2d2d, o mesmo --vf-primaria do
   vucafood-web) entra so como acento: botao primario, item ativo,
   foco, logo. Quem colore a tela e o cardapio do cliente, nao o painel.

   Prefixo `--mv-` (Meu VucaFood). Os nomes espelham o globals.css do
   vucafood-web onde ha equivalente, para o mesmo valor ter o mesmo
   nome nos dois produtos.

   Ordem no <head>: tokens.css -> painel.css -> css da tela.
══════════════════════════════════════════════════════════ */

:root {
  color-scheme: only light;

  /* ── Marca ─────────────────────────────────────────────── */
  --mv-marca:          #ff2d2d;  /* = --vf-primaria. Fundo de botao, logo, item ativo */
  --mv-marca-hover:    #e62424;
  --mv-marca-ativa:    #cc1f1f;
  --mv-marca-suave:    #ffe3e3;  /* fundo de item selecionado, badge da marca */
  --mv-marca-clara:    #fff1f0;  /* hover de linha, fundo de aviso da marca */
  --mv-marca-texto:    #c81e1e;  /* vermelho para TEXTO sobre branco: 5.9:1.
                                    #ff2d2d em texto pequeno nao passa AA (3.9:1) */
  --mv-marca-rgb:      255, 45, 45;

  /* ── Neutros (zinc, como o VucaFood) ───────────────────── */
  --mv-fundo:          #f4f4f6;  /* fundo da pagina, atras dos cards */
  --mv-superficie:     #ffffff;  /* card, tabela, topbar, sidebar */
  --mv-superficie-2:   #fafafa;  /* cabecalho de tabela, linha zebrada, input desabilitado */
  --mv-borda:          #e4e4e7;
  --mv-borda-forte:    #d4d4d8;  /* borda de input */
  --mv-texto:          #18181b;
  --mv-texto-2:        #3f3f46;  /* texto secundario legivel (7.6:1) */
  --mv-texto-suave:    #71717a;  /* label, meta, placeholder (4.7:1) */
  --mv-texto-fraco:    #a1a1aa;  /* so icone decorativo e separador */
  --mv-texto-inverso:  #ffffff;
  --mv-preto:          #0b0b0d;  /* sidebar compacta no mobile, tooltip */

  /* ── Semanticas (as mesmas do vucafood-web) ────────────── */
  --mv-ok:             #15803d;
  --mv-ok-fundo:       #f0fdf4;
  --mv-alerta:         #8a5a00;
  --mv-alerta-fundo:   #fff8e6;
  --mv-erro:           #b3261e;
  --mv-erro-fundo:     #fdecea;
  --mv-info:           #2563eb;
  --mv-info-fundo:     #eff6ff;

  /* ── Tipografia ────────────────────────────────────────── */
  --mv-fonte: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mv-fonte-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mv-t-xs:   12px;   /* badge, legenda */
  --mv-t-sm:   13px;   /* meta, celula secundaria */
  --mv-t-base: 15px;   /* corpo. 15 e nao 14: Source Sans e pequena na altura-x */
  --mv-t-md:   16px;   /* input (>= 16 evita zoom do iOS), botao */
  --mv-t-lg:   18px;   /* titulo de card */
  --mv-t-xl:   22px;   /* titulo de secao */
  --mv-t-2xl:  28px;   /* titulo de pagina */
  --mv-peso-regular: 400;
  --mv-peso-medio:   500;
  --mv-peso-semi:    600;
  --mv-peso-forte:   700;
  --mv-altura-linha: 1.45;
  --mv-altura-titulo: 1.2;

  /* ── Espaco (base 4) ───────────────────────────────────── */
  --mv-e-1: 4px;
  --mv-e-2: 8px;
  --mv-e-3: 12px;
  --mv-e-4: 16px;
  --mv-e-5: 20px;
  --mv-e-6: 24px;
  --mv-e-8: 32px;
  --mv-e-10: 40px;
  --mv-e-12: 48px;

  /* ── Raio e sombra ─────────────────────────────────────── */
  --mv-raio-sm: 8px;    /* input, botao, badge */
  --mv-raio-md: 12px;   /* card, modal */
  --mv-raio-lg: 16px;   /* sheet mobile, banner */
  --mv-raio-pill: 999px;
  --mv-sombra-1: 0 1px 2px rgba(24, 24, 27, .06);
  --mv-sombra-2: 0 4px 12px rgba(24, 24, 27, .08);
  --mv-sombra-3: 0 12px 32px rgba(24, 24, 27, .14);
  --mv-foco: 0 0 0 3px rgba(var(--mv-marca-rgb), .25);

  /* ── Layout do painel ──────────────────────────────────── */
  --mv-sidebar-l:      240px;
  --mv-sidebar-l-mini: 64px;
  --mv-topbar-a:       60px;
  --mv-conteudo-max:   1120px;
  --mv-margem:         24px;   /* desktop; o mobile cai para 16 no painel.css */
  --mv-controle-a:     40px;   /* altura de input e botao padrao */
  --mv-controle-a-sm:  32px;
  --mv-controle-a-lg:  48px;

  /* ── Movimento ─────────────────────────────────────────── */
  --mv-dur: 160ms;
  --mv-ease: cubic-bezier(.2, .7, .2, 1);

  /* ── Camadas ───────────────────────────────────────────── */
  --mv-z-sidebar: 30;
  --mv-z-topbar: 20;
  --mv-z-overlay: 40;
  --mv-z-modal: 50;
  --mv-z-toast: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root { --mv-dur: 0ms; }
}