/* Design Tokens */
:root {
  /* Colors */
  --color-sage: #c2c9bc;
  --color-dark: #262823;
  --color-text-primary: #262823;
  --color-text-muted: #a0a69b;
  --color-text-tertiary: #3b3f37;
  --color-grid: rgba(59, 63, 55, 0.6);
  --color-white: #ffffff;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-2xl: 80px;
  --spacing-3xl: 120px;

  /* Layout */
  --max-width: 1240px;
  --margin-mobile: 24px;
  --margin-tablet: 40px;

  /* Grid Settings */
  --grid-spacing-mobile: 16px;
  --grid-spacing-tablet: 16px;
  --grid-spacing-desktop: 16px;

  /* Fisheye Effect */
  --fisheye-radius-mobile: 150px;
  --fisheye-radius-tablet: 175px;
  --fisheye-radius-desktop: 200px;

  /* Typography Scale */
  --font-size-xs: clamp(14px, 2vw, 16px);
  --font-size-sm: clamp(16px, 2.5vw, 18px);
  --font-size-base: clamp(18px, 3vw, 24px);
  --font-size-lg: clamp(24px, 4vw, 36px);
  --font-size-xl: clamp(36px, 6vw, 56px);
  --font-size-2xl: clamp(48px, 8vw, 80px);
  --font-size-3xl: clamp(64px, 10vw, 120px);

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-extrabold: 800;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Z-index */
  --z-video: -1;        /* Video background below canvas */
  --z-canvas: 0;
  --z-content: 1;
  --z-header: 10;

  /* Breakpoints (for reference in media queries) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1200px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}