:root {
  /* Colors — from logo */
  --navy: #1B3A5C;
  --navy-dark: #12283F;
  --navy-light: #2C5278;
  --coral: #E8705A;
  --coral-dark: #D05A45;
  --coral-light: #F5907C;
  --cream: #FAF8F5;
  --cream-dark: #F0EDE7;
  --charcoal: #1A1A1A;
  --muted: #6B7280;
  --border: #E5E0D8;

  /* Fixed surfaces — never flip with theme */
  --surface-navy: #12283F;
  --on-navy-text: #FFFFFF;
  --on-navy-muted: #C8D2E0;

  /* Header surface */
  --header-bg: rgba(250,248,245,0.9);
  --header-border: #E5E0D8;

  /* Card surface */
  --card-bg: #FFFFFF;
  --card-icon-bg: rgba(27,58,92,0.08);
  --card-icon-fg: #1B3A5C;

  /* Metric pill surface (projects page) */
  --metric-bg: #F0EDE7;
  --metric-fg: #12283F;

  /* Typography — fluid */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'General Sans', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.27vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);

  /* Spacing — fluid */
  --sp-1: clamp(6px, 0.5rem, 8px);
  --sp-2: clamp(12px, 1rem, 16px);
  --sp-3: clamp(18px, 1.5rem, 24px);
  --sp-4: clamp(24px, 2rem, 32px);
  --sp-5: clamp(36px, 3rem, 48px);
  --sp-6: clamp(48px, 4rem, 64px);
  --sp-7: clamp(64px, 6rem, 96px);
  --sp-8: clamp(80px, 8rem, 128px);

  --container-pad: clamp(16px, 4vw, 32px);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(27,58,92,0.08);
  --shadow: 0 4px 20px rgba(27,58,92,0.10);
  --shadow-lg: 0 20px 60px rgba(27,58,92,0.15);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --tap-target: 44px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

[data-theme="dark"] {
  /* Background — two clearly distinct tones for alternation */
  --cream: #000000;
  --cream-dark: #141414;

  /* Text on black */
  --charcoal: #F5F3EF;
  --navy-dark: #FFFFFF;
  --navy: #E8EEF5;

  /* Muted + borders */
  --muted: #9CA3AF;
  --border: #1F1F1F;

  /* Shadows — deeper on black */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.8);

  /* Header surface */
  --header-bg: rgba(0,0,0,0.85);
  --header-border: #1F1F1F;

  /* Card surface */
  --card-bg: #0A0A0A;
  --card-icon-bg: rgba(232,112,90,0.12);
  --card-icon-fg: #E8705A;

  /* Metric pill surface */
  --metric-bg: rgba(255,255,255,0.06);
  --metric-fg: #F5F3EF;
}