/* ============================================
   CLUBE DO NATURAL — Design Tokens
   ============================================ */

:root {
  /* === CORES === */
  --verde-escuro: #1B4332;
  --verde-medio: #2D6A4F;
  --verde-claro: #52B788;
  --verde-hover: #40916C;
  --bege: #F5F0E8;
  --bege-escuro: #E8E0D0;
  --terra: #8B6914;
  --dourado: #C4972A;
  --branco: #FFFFFF;
  --vermelho: #E63946;
  --vermelho-claro: #FFF0F0;
  --amarelo: #F4A261;
  --amarelo-claro: #FFF8E1;
  --azul: #457B9D;
  --azul-claro: #E8F4FD;
  --cinza-100: #F8F9FA;
  --cinza-200: #E9ECEF;
  --cinza-300: #DEE2E6;
  --cinza-400: #CED4DA;
  --cinza-500: #ADB5BD;
  --cinza-600: #6C757D;
  --cinza-700: #495057;
  --cinza-800: #343A40;
  --cinza-900: #212529;

  /* === TIPOGRAFIA === */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 2rem;      /* 32px */
  --fs-3xl: 2.5rem;    /* 40px */
  --fs-4xl: 3rem;      /* 48px */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* === ESPAÇAMENTO === */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* === BORDAS === */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* === TRANSIÇÕES === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* === LAYOUT === */
  --max-width: 1280px;
  --sidebar-width: 260px;
  --header-height: 64px;
  --cart-width: 380px;
}

/* === BREAKPOINTS (referência, usar em media queries) ===
   Mobile:  < 480px
   Tablet:  480px - 768px
   Desktop: 768px - 1024px
   Wide:    > 1024px
*/