/* ========================================
   CSS VARIABLES - Design System
   ======================================== */

:root {
  /* ========================================
     COLORS - Minimal Professional Palette
     ======================================== */

  /* Primary Colors */
  --color-primary: #000000;        /* Pure black for text */
  --color-secondary: #333333;      /* Dark gray for secondary text */
  --color-accent: #0066FF;         /* Blue accent for CTAs/links */
  --color-background: #fcfcfc;     /* White background */
  --color-surface: #F8F8F8;        /* Light gray for sections */
  --color-border: #E0E0E0;         /* Subtle borders */
  --color-text-muted: #666666;     /* Muted text */

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

  /* Font Sizes - Fluid Typography with clamp() */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);         /* 14-16px */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18px */
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);          /* 18-24px */
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);            /* 24-40px */
  --font-size-2xl: clamp(2rem, 1.5rem + 2vw, 4rem);               /* 32-64px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;

  /* ========================================
     SPACING - 8px Base Scale
     ======================================== */

  --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: 6rem;     /* 96px */

  /* ========================================
     LAYOUT
     ======================================== */

  --max-width-container: 1200px;
  --max-width-content: 800px;
  --max-width-narrow: 600px;

  /* ========================================
     BORDERS
     ======================================== */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */

  --z-base: 1;
  --z-nav: 100;
  --z-modal: 1000;
}