/* Tokens de design — única fonte de cores, tipografia, espaço e raios.
   A cor da marca (--marca) é sobrescrita por estabelecimento (Etapa 3). */
:root {
  color-scheme: light;

  /* Neutros */
  --tinta: #1d2026;          /* texto principal */
  --grafite: #4a505c;        /* texto secundário */
  --cinza: #6b717d;          /* texto terciário e ícones */
  --linha: #e1e3e8;          /* bordas e divisórias */
  --linha-forte: #c9ccd3;
  --nevoa: #f3f4f6;          /* fundo da aplicação */
  --papel: #ffffff;          /* superfícies */

  /* Marca padrão (ameixa). Cada estabelecimento troca estas quatro. */
  --marca: #6a3d6c;
  --marca-forte: #522d54;
  --marca-suave: #f3ecf3;
  --sobre-marca: #ffffff;

  /* Estados */
  --sucesso: #1f7a4d;  --sucesso-suave: #e6f3ec;
  --alerta: #8a5a00;   --alerta-suave: #fbf1dc;
  --erro: #b3261e;     --erro-suave: #fbe9e7;
  --info: #22577a;     --info-suave: #e5eff6;

  /* Tipografia: sans para a interface, serifa só nos títulos de página */
  --fonte-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
  --t-xs: 0.75rem;  --t-sm: 0.875rem;  --t-md: 1rem;  --t-lg: 1.125rem;
  --t-xl: 1.5rem;   --t-2xl: 2.25rem;  --t-3xl: 2.75rem;

  /* Espaço (escala de 4px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* Raios: pequeno para controles, médio para painéis, cheio para pílulas */
  --r-sm: 6px; --r-md: 10px; --r-cheio: 999px;

  --sombra-flutuante: 0 12px 32px -8px rgba(29, 32, 38, .22), 0 2px 6px rgba(29, 32, 38, .08);
  --foco: 0 0 0 3px color-mix(in srgb, var(--marca) 40%, transparent);

  --lateral: 248px;
  --topo: 60px;
  --barra-movel: 64px;
  --transicao: 160ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --tinta: #eceef2; --grafite: #b8bdc7; --cinza: #969cab;
    --linha: #2d313a; --linha-forte: #3b404b;
    --nevoa: #15171c; --papel: #1d2027;
    --marca: #c9a0ca; --marca-forte: #dcbcdc; --marca-suave: #2e2432; --sobre-marca: #1d1420;
    --sucesso: #6fcf9e; --sucesso-suave: #17291f;
    --alerta: #e8b85c; --alerta-suave: #2c2414;
    --erro: #f2a39b; --erro-suave: #33191a;
    --info: #8cc1e6; --info-suave: #16242f;
    --sombra-flutuante: 0 12px 32px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  }
}

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