/* Loja Matriz — tokens do tema.
   O backend injeta as variáveis do tema como --ap-* (ThemeView.css_vars, achatando tokens_json: {"color": {"primary": …}} → --ap-color-primary).
   Aqui cada token de componente (--c-*, --font-*, --radius…) lê o --ap-* correspondente e cai no padrão da matriz
   ("Rubi Clássico", styleboard v2 vermelho/ouro) se o tema não definir. Componentes só usam os tokens abaixo.
   Chaves de tema reconhecidas: ver docs/PEDIDOS-FRONTEND.md §Tokens. */
:root {
  /* cores de marca */
  --c-primary: var(--ap-color-primary, #8B1A1A);
  --c-primary-2: var(--ap-color-primary-dark, #5E1010);
  --c-on-primary: var(--ap-color-on-primary, #FFFFFF);
  --c-accent: var(--ap-color-accent, #FCD34D);
  --c-accent-2: var(--ap-color-accent-dark, #D97706);
  --c-on-accent: var(--ap-color-on-accent, #450A0A);
  --c-cta: var(--ap-color-cta, #B91C1C);
  --c-cta-hover: var(--ap-color-cta-hover, #991B1B);
  --c-on-cta: var(--ap-color-on-cta, #FFFFFF);
  /* superfícies e texto */
  --c-bg: var(--ap-color-bg, #FAF7F5);
  --c-surface: var(--ap-color-surface, #FFFFFF);
  --c-subtle: var(--ap-color-subtle, #F3EEEA);
  --c-border: var(--ap-color-border, #E7DFD8);
  --c-text: var(--ap-color-text, #1F1414);
  --c-text-2: var(--ap-color-text-2, #4A3B3B);
  --c-muted: var(--ap-color-muted, #6B5A5A);
  /* semânticas */
  --c-best: var(--ap-color-best, #15803D);
  --c-best-bg: var(--ap-color-best-bg, #DCFCE7);
  --c-discount: var(--ap-color-discount, #B91C1C);
  --c-warn-bg: #FEF3C7;
  --c-warn: #92400E;
  --c-band: var(--ap-color-band, #14532D);
  --c-focus: var(--ap-color-focus, #0369A1);
  /* tipografia (typography_json → --ap-font-<papel>) */
  --font-display: var(--ap-font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
  --font-hero: var(--ap-font-hero, var(--ap-font-display, 'Playfair Display', Georgia, serif));
  --font-body: var(--ap-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --font-mono: ui-monospace, 'JetBrains Mono', Consolas, monospace;
  --fw-display: var(--ap-weight-display, 800);
  /* forma */
  --radius: var(--ap-radius-base, 12px);
  --radius-sm: var(--ap-radius-sm, 8px);
  --radius-pill: 9999px;
  --shadow: var(--ap-shadow-card, 0 1px 3px rgba(31, 20, 20, .08), 0 1px 2px rgba(31, 20, 20, .05));
  --shadow-hover: var(--ap-shadow-hover, 0 10px 24px -8px rgba(31, 20, 20, .22));
  /* densidade: 1 = padrão, .85 = compacto, 1.15 = arejado */
  --density: var(--ap-density, 1);
  --space: calc(16px * var(--density));
  --container: 1240px;
}