:root {
  /* Spacing system */
  --space-unit: 1rem;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));

  /* Layout */
  --container-width: min(100% - 2rem, 1200px);
  --container-wide: min(100% - 2rem, 1400px);
  --container-narrow: min(100% - 2rem, 800px);
  --grid-gap: var(--space-md);
  --section-padding: var(--space-xl);
  --header-height: 80px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
    /* Add these to your existing variables */
  --header-height: 80px;
  --header-height-scrolled: 60px;
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-bg-scrolled: rgba(255, 255, 255, 0.98);
}

  /* For dark mode support */
  @media (prefers-color-scheme: dark) {
    --header-bg: rgba(15, 20, 30, 0.96);
    --header-bg-scrolled: rgba(15, 20, 30, 0.98);
  }