:root {
  /* Colors — Light Theme */
  --color-bg:          #FFFFFF;
  --color-surface:     #F4F9F8;
  --color-surface-2:   #E8F5F2;
  --color-border:      #D0E8E3;
  --color-fg:          #1A2B28;
  --color-fg-muted:    #5A7870;
  --color-accent:      #009E8A;
  --color-accent-dark: #007A6B;
  --color-white:       #FFFFFF;
  --color-section-alt: #1A2B28;
  --color-section-alt-fg: #FFFFFF;
  --color-error:       #D93025;

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Fluid type scale (clamp: min 375px → max 1440px) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1rem, 1.2vw, 1.125rem);
  --text-xl:   clamp(1.25rem, 2vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 3vw, 2rem);
  --text-3xl:  clamp(2rem, 4vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 5vw, 4rem);
  --text-hero: clamp(3rem, 8vw, 7rem);

  /* Spacing (8pt grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-px:  1.5rem;
  --nav-height:    72px;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Shadows */
  --shadow-card:   0 2px 16px rgba(26, 43, 40, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(26, 43, 40, 0.14);
  --shadow-accent: 0 0 0 3px rgba(0, 158, 138, 0.2);

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* Z-index */
  --z-nav:     100;
  --z-overlay: 200;
}