/* ─── TOKENS E VARIÁVEIS (NÚCLEO DO DESIGN SYSTEM) ─── */

:root {
  /* Paleta principal */
  --color-primary: #D4A017;
  --color-primary-dark: #A67C00;
  --color-accent: #C0392B;
  --color-secondary: #2C2C2C;
  --color-promotion: #27ae60; /* Cor para destaques de preço em promoção */

  /* Superfícies (Light) */
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-surface-hover: #f1f5f9;
  --color-status-open: #22c55e;
  --color-status-closed: #ef4444;
  --color-status-warning: #f59e0b;
  --color-surface-alt: #F3F0EB;
  --color-border: #E8E3DC;
  --color-skeleton-bg: #E1E1E1;
  --color-skeleton-shimmer: #FFFFFF;

  /* Texto (Light) */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-on-primary: #FFFFFF;

  /* Cores Semânticas Adaptáveis (Light) */
  --color-header-bg: rgba(250, 250, 248, 0.85); /* Combina com color-bg */
  --color-glass: rgba(255, 255, 255, 0.85);

  /* Tipografia */
  --font-display: 'Fraunces', serif;
  --font-body: 'Outfit', sans-serif;
  --font-ui: 'Outfit', sans-serif;

  /* Escala tipográfica */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Bordas e raios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Status Colors */
  --color-status-open: #22c55e;
  --color-status-closed: #ef4444;
  --color-status-warning: #f59e0b;

  /* Sombras (Light) */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);

  /* Transições */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

  /* Layout */
  --max-width: 480px;
  --header-height: 64px;
  --nav-height: 56px;
  --cart-bar-height: 80px;
}

/* ─── DARK MODE ─── */
[data-theme="dark"] {
  --color-primary: #D4A017;
  --color-primary-dark: #FFD25A;
  --color-bg: #121210;               /* Ébano profundo e quente */
  --color-surface: #1E1E1B;          /* Superfície integrada */
  --color-surface-alt: #282824;
  --color-border: #33332D;
  --color-skeleton-bg: #1E1E1B;
  --color-skeleton-shimmer: #33332D;

  --color-secondary: #E8E3DC;
  --color-promotion: #2ecc71; 
  --color-text-primary: #E8E3DC;    /* Creme elegante (igual à borda light) */
  --color-text-secondary: #A6A199;
  --color-text-muted: #736F68;
  --color-text-on-primary: #000000;

  --color-header-bg: rgba(18, 18, 16, 0.85); 
  --color-glass: rgba(30, 30, 27, 0.85);

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.8);
}

body {
  transition: var(--transition-theme);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}