:root {
  /* Backgrounds */
  --color-bg-deepest:    #03101F;
  --color-bg-dark:       #060F20;
  --color-bg-card:       #0A1929;
  --color-bg-card-hover: #0D2035;
  --color-bg-light:      #F0F4F8;
  --color-bg-light-card: #E4EBF2;

  /* Accent */
  --color-accent:        #00B4DC;
  --color-accent-bright: #22CCEF;
  --color-accent-dim:    rgba(0, 180, 220, 0.12);
  --color-accent-glow:   rgba(0, 180, 220, 0.18);

  /* Text */
  --color-text-primary:  #FFFFFF;
  --color-text-muted:    #8FA8C0;
  --color-text-faint:    #4A6580;
  --color-text-dark:     #0D1E30;
  --color-text-dark-muted: #4A6070;

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-med:    rgba(255, 255, 255, 0.14);
  --color-border-accent: rgba(0, 180, 220, 0.45);

  /* Fonts */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs:  0.375rem;
  --space-sm:  0.75rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  6rem;

  /* Section padding */
  --section-v: clamp(4.5rem, 9vw, 9rem);
  --section-h: clamp(1.5rem, 5vw, 4rem);

  /* Max width */
  --max-width: 1200px;

  /* Transitions */
  --t-fast:   150ms ease-out;
  --t-mid:    240ms ease-out;
  --t-slow:   400ms ease-out;

  /* Border radius */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;

  /* Nav height */
  --nav-height: 72px;
}