/* ==========================================================================
   Design Tokens for Serena Health Resources
   All CSS custom properties (variables) defined here
   ========================================================================== */

:root {
  /* ==========================================================================
     Brand Gradient
     ========================================================================== */
  --gradient-primary: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(233, 30, 140, 0.05) 0%, rgba(123, 63, 157, 0.05) 50%, rgba(0, 71, 187, 0.05) 100%);
  --gradient-text: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);

  /* ==========================================================================
     Brand Colors
     ========================================================================== */
  --accent-pink: #E91E8C;
  --accent-purple: #7B3F9D;
  --accent-blue: #0047BB;

  /* ==========================================================================
     Neutral Colors
     ========================================================================== */
  --black: #1a1a1a;
  --gray-900: #2d3748;
  --gray-700: #4a5568;
  --gray-500: #718096;
  --gray-300: #cbd5e0;
  --gray-100: #edf2f7;
  --cream: #fefdfb;
  --white: #ffffff;

  /* ==========================================================================
     Category Colors
     ========================================================================== */
  --cat-longevity: #10b981;
  --cat-weight-loss: #f59e0b;
  --cat-performance: #ef4444;
  --cat-sleep: #6366f1;
  --cat-nutrition: #22c55e;
  --cat-research: #8b5cf6;

  /* ==========================================================================
     Spacing System (8px base)
     ========================================================================== */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Montserrat', 'Inter', sans-serif;

  --text-base: 1.125rem;   /* 18px */
  --text-sm: 0.875rem;     /* 14px */
  --text-xs: 0.75rem;      /* 12px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 2rem;        /* 32px */
  --text-3xl: 2.5rem;      /* 40px */
  --text-4xl: 3rem;        /* 48px */
  --text-5xl: 3.75rem;     /* 60px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ==========================================================================
     Layout
     ========================================================================== */
  --container-max: 1200px;
  --article-max: 680px;
  --content-padding: 2rem;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Dark mode support (optional future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Can add dark mode variables here if needed */
  }
}