/*
  CSS Variables - Design System
  Colors, Typography, Spacing
*/

:root {
  /* ===== Colors ===== */
  --color-bg: #FFFFFF;
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-accent: #007AFF;
  --color-border: #E5E5E7;

  /* ===== Typography ===== */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;

  /* Font sizes - Responsive with clamp() */
  --font-size-hero: clamp(4rem, 10vw, 8rem);       /* 64px - 128px */
  --font-size-h2: clamp(1.5rem, 5vw, 3rem);        /* 24px - 48px */
  --font-size-body: clamp(1.125rem, 2.5vw, 1.5rem); /* 18px - 24px */
  --font-size-small: clamp(0.875rem, 1.5vw, 1rem); /* 14px - 16px */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== Spacing ===== */
  --section-padding: 100vh;
  --content-max-width: 700px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* ===== Transitions ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.8s ease-out;

  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}