:root {
  /* Colors - Mycelium Brand */
  --color-primary: #F7941D;        /* Orange - buttons, accents */
  --color-primary-dark: #E8850F;   /* Orange dark - gradients */
  --color-secondary: #C1272D;      /* Dark red - hover states */
  --color-black: #1A1A1A;          /* Headings */
  --color-gray: #4A4A4A;           /* Body text */
  --color-gray-light: #F5F5F5;     /* Backgrounds */
  --color-white: #FFFFFF;          /* Cards, main bg */
  --color-border: #E5E5E5;         /* Borders */
  --color-warm-bg: #FFF8F0;        /* Warm background */
  --color-cool-bg: #F9FAFB;        /* Cool background */
  --color-safety-bg: #F0F4F8;      /* Safety info background */
  --color-green: #22C55E;          /* Success / checkmarks */
  --color-teal: #0D9488;           /* Wellness category */
  --color-blue: #3B82F6;           /* Recovery category */

  /* Typography */
  --font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-price: 24px;
  --font-size-button: 16px;

  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 80px;

  /* Layout */
  --container-max-width: 1200px;
  --content-max-width: 800px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition: all 0.3s ease;
}