:root {
  /* Colors - Brand Identity */
  --c-bg: #F7FAFC;
  --c-text: #2D3748;
  --c-muted: #718096;
  --c-primary: #2C5282;
  --c-secondary: #38B2AC;
  --c-soft-teal: rgb(228, 243, 244);
  --c-accent: #ED8936;
  --c-accent-hover: #DD6B20;
  --c-surface: #FFFFFF;
  --c-surface-dark: #2C5282;
  --c-border: rgba(45, 55, 72, .12);
  --c-light-gray: #E2E8F0;
  
  /* Gradients */
  --gradient-brand: linear-gradient(135deg, rgba(44, 82, 130, 0.95), rgba(56, 178, 172, 0.9));
  
  /* Legacy alias for compatibility */
  --c-forest: #2C5282;

  /* Typography */
  --ff-h: "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-b: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-m: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (clamp for fluid) */
  --fs-1: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-2: clamp(1.1rem, 1.0rem + 0.35vw, 1.25rem);
  --fs-3: clamp(1.35rem, 1.15rem + 0.8vw, 1.9rem);
  --fs-4: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  --fs-5: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 56px;
  --sp-10: 64px;
  --sp-12: 80px;
  --sp-14: 96px;
  --sp-16: 128px;

  /* Radius */
  --r-1: 10px;
  --r-2: 14px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 6px 18px rgba(11, 15, 14, .08);
  --sh-2: 0 12px 32px rgba(11, 15, 14, .12);
  --sh-3: 0 20px 48px rgba(11, 15, 14, .16);

  /* Container */
  --container-max: 1120px;
  --container-padding: clamp(16px, 3vw, 32px);

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr-normal: 250ms ease;
  --tr-slow: 400ms ease;
}