:root {
  /* Colors - Primary (Editorial Sophistication) */
  --color-primary: #2563eb; /* Blue - Primary brand color */
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #60a5fa; /* Light Blue */
  
  /* Colors - Background */
  --color-background: #F4F1E8; /* Warm Sand - Background color */
  --color-background-light: #F8F9FA; /* Light Gray - Card backgrounds */
  --color-white: #FFFFFF;
  
  /* Colors - Text */
  --color-text-primary: #2C2C2C; /* Charcoal - Primary text */
  --color-text-secondary: #6C757D; /* Medium Gray - Secondary text */
  --color-text-light: #A8A8A8;
  
  /* Colors - Accent */
  --color-accent: #E07A5F; /* Coral - Call-to-action buttons */
  --color-accent-light: #F4A896;
  --color-accent-dark: #C85A3F;
  
  --color-accent-secondary: #A8DADC; /* Soft Blue - Secondary information */
  --color-accent-success: #81B29A; /* Sage Green - Success states */
  
  /* Colors - Borders & Dividers */
  --color-border: #E9ECEF; /* Border Gray */
  --color-border-light: #F0F0F0;
  
  /* Colors - Semantic */
  --color-success: #81B29A; /* Sage Green */
  --color-warning: #F4A261;
  --color-error: #E07A5F; /* Coral for errors */
  --color-info: #A8DADC; /* Soft Blue */
  
  /* Typography - Editorial Sophistication */
  /* Primary: Tiempos Headline for headings */
  --font-display: 'Tiempos Headline', 'Georgia', 'Times New Roman', serif;
  /* Secondary: Suisse International for body */
  --font-primary: 'Suisse International', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Font Loading - Add fallbacks to prevent layout shift */
  font-display: swap;
  
  /* Font Sizes - Editorial Hierarchy */
  --font-size-h1: 48px; /* Tiempos Bold - Hero headlines */
  --font-size-h2: 36px; /* Tiempos Medium - Section headers */
  --font-size-h3: 24px; /* Suisse Semibold - Subsection titles */
  --font-size-h4: 22px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;
  --font-size-body-large: 18px;
  --font-size-body: 16px; /* Suisse Regular - Main content */
  --font-size-body-small: 14px; /* Suisse Light - Supporting info */
  --font-size-caption: 12px;
  
  /* Font Weights */
  --font-weight-light: 300; /* Suisse Light */
  --font-weight-regular: 400; /* Suisse Regular, Tiempos Regular */
  --font-weight-medium: 500; /* Tiempos Medium, Suisse Medium */
  --font-weight-semibold: 600; /* Suisse Semibold */
  --font-weight-bold: 700; /* Tiempos Bold */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  
  /* Layout */
  --container-max-width: 1200px;
  --gutter-desktop: 24px;
  --gutter-tablet: 16px;
  --gutter-mobile: 12px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);
  
  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #F8F9FA;
    --color-text-secondary: #E8ECEF;
    --color-background: #1A1A1A;
    --color-white: #2C3E50;
    --color-border: #3A4A5C;
  }
}