:root {
  /* Colors */
  --color-pure-black: #000000;
  --color-surface-one: #212121;
  --color-surface-two: #292929;
  --color-surface-three: #333333;
  --color-paper-white: #ffffff;
  --color-fog: #e5e7eb;
  --color-mist: #f5f5f5;
  --color-mid-gray: #999999;
  --color-steel: #737373;
  --color-graphite: #666666;
  --color-slate: #525252;
  --color-charcoal: #404040;
  --color-electric-blue: #0075ff;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 10px; --leading-caption: 1.4; --tracking-caption: -0.1px;
  --text-body: 14px; --leading-body: 1.5; --tracking-body: -0.14px;
  --text-body-lg: 18px; --leading-body-lg: 1.4; --tracking-body-lg: -0.4px;
  --text-heading-sm: 20px; --leading-heading-sm: 1.33; --tracking-heading-sm: -0.44px;
  --text-heading: 40px; --leading-heading: 1.15; --tracking-heading: -1.9px;
  --text-display: 52px; --leading-display: 1.15; --tracking-display: -3.2px;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px; --spacing-40: 40px; --spacing-60: 60px; --spacing-72: 72px; --spacing-80: 80px; --spacing-96: 96px; --spacing-100: 100px; --spacing-140: 140px; --spacing-180: 180px;

  /* Layout */
  --page-max-width: 1280px; --section-gap: 96px; --card-padding: 12px; --element-gap: 8px;

  /* Border Radius */
  --radius-md: 7px; --radius-lg: 10px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 100px;
  --radius-tags: 100px; --radius-cards: 10px; --radius-pills: 100px; --radius-badges: 7px; --radius-modals: 24px; --radius-buttons: 7px; --radius-large-cards: 16px;

  /* Shadows */
  --shadow-xl: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;

  /* Surfaces */
  --surface-canvas: var(--color-pure-black);
  --surface-card: var(--color-surface-one);
  --surface-raised: var(--color-surface-two);
  --surface-floating: var(--color-surface-three);
}

/* Apply background */
body { background: var(--surface-canvas); color: var(--color-paper-white); }

/* Example overrides for existing components */
.nav { background: rgba(0,0,0,0.88); }
.nav-cta { background: var(--color-electric-blue); color: var(--color-paper-white); }
.gallery-card { background: var(--surface-card); border-radius: var(--radius-cards); }
.gallery-card img { border-radius: var(--radius-cards); }
.infinite-controls button { border-radius: var(--radius-pills); }