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

:root {
  /* Paleta principal (Floricultura Félix) */
  --color-primary: #214E34;        /* Verde Botânico Profundo */
  --color-primary-dark: #163322;
  --color-accent: #D9A9B0;         /* Rosa Blush Suave */
  --color-secondary: #A16A4C;      /* Terracota Rústico */
  --color-promotion: #214E34; 

  /* Superfícies (Light) */
  --color-bg: #F2E7DA;             /* Bege Algodão Quente */
  --color-surface: #FFFFFF;
  --color-surface-hover: #E8DCD0;
  --color-status-open: #214E34;
  --color-status-closed: #A16A4C;
  --color-status-warning: #D9A9B0;
  --color-surface-alt: #E8DCD0;
  --color-border: #D9C5B2;
  --color-skeleton-bg: #E8DCD0;
  --color-skeleton-shimmer: #F2E7DA;

  /* Texto (Light) */
  --color-text-primary: #214E34;   /* Verde Botânico para texto principal */
  --color-text-secondary: #5C4033;  /* Marrom suave derivado da terracota */
  --color-text-muted: #8C7B70;
  --color-text-on-primary: #F2E7DA;

  /* Cores Semânticas Adaptáveis (Light) */
  --color-header-bg: rgba(242, 231, 218, 0.85); 
  --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: #214E34;          /* Verde Botânico */
  --color-primary-dark: #2C6B47;     /* Versão mais viva para destaque */
  --color-accent: #D9A9B0;           /* Rosa Blush */
  --color-bg: #121210;               
  --color-surface: #1E1E1B;          
  --color-surface-alt: #282824;
  --color-border: #2A3B31;           /* Borda levemente esverdeada */
  --color-skeleton-bg: #1E1E1B;
  --color-skeleton-shimmer: #282824;

  --color-secondary: #A16A4C;        /* Terracota */
  --color-promotion: #D9A9B0; 
  --color-text-primary: #E8E3DC;    
  --color-text-secondary: #A6A199;
  --color-text-muted: #736F68;
  --color-text-on-primary: #F2E7DA;

  --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;
}