/*
 * Design Tokens
 * Color palette, typography, spacing system
 * Source: drc1_IMPROVED.md Section 6
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */
  
  /* Primary Colors */
  --color-charcoal: #2C2C2C;      /* Authority, body text */
  --color-white: #FFFFFF;          /* Clarity, backgrounds */
  --color-slate-blue: #4A5F7A;     /* Trust, subheadings */
  --color-beige: #F5F3EF;          /* Approachability, alt backgrounds */
  
  /* Accent Colors (Minimal Use) */
  --color-sage: #5C6F5C;           /* Ayurvedic heritage (sparingly) */
  --color-sienna: #A0522D;         /* CTA only */
  
  /* Semantic Colors */
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-slate-blue);
  --color-background-primary: var(--color-white);
  --color-background-secondary: var(--color-beige);
  --color-accent: var(--color-sage);
  --color-cta: var(--color-sienna);
  
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-secondary: 'Merriweather', Georgia, 'Times New Roman', serif;
  
  /* Font Sizes */
  --font-size-h1: 3rem;              /* 48px */
  --font-size-h2: 2.25rem;           /* 36px */
  --font-size-h3: 1.75rem;           /* 28px */
  --font-size-body: 1.125rem;        /* 18px */
  --font-size-small: 1rem;           /* 16px */
  --font-size-caption: 0.875rem;     /* 14px */
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;
  
  
  /* ============================================
     SPACING SYSTEM
     ============================================ */
  
  /* Base spacing unit: 8px */
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 3rem;        /* 48px */
  --space-2xl: 4rem;       /* 64px */
  --space-3xl: 5rem;       /* 80px */
  --space-4xl: 7.5rem;     /* 120px */
  
  /* Section Spacing */
  --section-padding-desktop: var(--space-4xl);  /* 120px */
  --section-padding-mobile: var(--space-3xl);   /* 80px */
  
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  /* Content Max Widths */
  --content-max-width: 720px;
  --content-wide-width: 960px;
  --container-max-width: 1440px;
  
  /* Responsive Breakpoints */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1441px;
  
  
  /* ============================================
     INTERACTION
     ============================================ */
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  
  /* Border Radius (Minimal) */
  --radius-subtle: 2px;
  --radius-small: 4px;
  
  
  /* ============================================
     ACCESSIBILITY
     ============================================ */
  
  /* Focus Ring */
  --focus-ring-color: var(--color-slate-blue);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-h1: 2.5rem;          /* 40px */
    --font-size-h2: 2rem;            /* 32px */
    --font-size-h3: 1.5rem;          /* 24px */
  }
}

/* Mobile: 320px - 767px */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 2rem;            /* 32px */
    --font-size-h2: 1.75rem;         /* 28px */
    --font-size-h3: 1.25rem;         /* 20px */
    --font-size-body: 1rem;          /* 16px */
    
    --section-padding-desktop: var(--space-2xl);  /* 64px mobile */
    --section-padding-mobile: var(--space-xl);    /* 48px mobile */
  }
}