:root {
  /* Primary palette */
  --color-primary: #1B4D5C;
  --color-secondary: #2A7B8C;
  --color-accent: #3BA0B5;

  /* Backgrounds */
  --color-bg-base:  #F7F8FA;       /* Off-white — default page background */
  --color-bg-light: #EEF4F8;       /* Teal wash — alternate sections */
  --color-bg-white: #FFFFFF;
  --color-bg-dark:  #1B4D5C;       /* Dark teal — footer */
  --color-dark:     #0F172A;       /* Near-black — hero, high-contrast sections */

  /* Text */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-text-light:     #FFFFFF;

  /* Borders */
  --color-border:        #E2E8F0;
  --color-border-accent: #3BA0B5;

  /* Typography */
  --font-display: 'Audiowide', cursive;
  --font-body:    'Inter', sans-serif;

  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.25vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.5vw,  1.375rem);
  --text-xl:   clamp(1.5rem,   1.25rem + 1vw,    2rem);
  --text-2xl:  clamp(2rem,     1.5rem  + 1.5vw,  2.75rem);
  --text-3xl:  clamp(2.5rem,   2rem    + 2vw,    3.5rem);
  --text-hero: clamp(3.25rem,  2.5rem  + 3vw,    6rem);

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

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

  /* Spacing */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2rem;
  --space-xl:      3rem;
  --space-2xl:     4rem;
  --space-3xl:     6rem;
  --space-section: clamp(3.5rem, 2.5rem + 3vw, 6.5rem);

  /* Layout */
  --max-width:         1400px;
  --max-width-narrow:  760px;
  --container-padding: 1.5rem;

  /* Effects */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.04);
  --transition:  200ms ease;
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Extended dark system */
  --color-bg-site:        #070E12;   /* deepest dark — hero, site base */
  --color-bg-section:     #0A1A21;   /* dark sections */
  --color-bg-hero:        #070E12;   /* kept for compat */
  --color-glass-bg:       rgba(255, 255, 255, 0.05);
  --color-glass-border:   rgba(255, 255, 255, 0.10);
  --color-glow:           rgba(59, 160, 181, 0.20);

  /* Hero atmosphere (legacy tokens still used) */
  --color-hero-spotlight: rgba(59, 160, 181, 0.14);
  --color-hero-dot:       rgba(59, 160, 181, 0.1);
}