@theme {
  /* Custom colors as CSS variables */

    --color-primary: #121212;
    --color-primary-50: #f8f8f8;
    --color-primary-100: #e8e8e8;
    --color-primary-200: #d3d3d3;
    --color-primary-300: #a3a3a3;
    --color-primary-400: #737373;
    --color-primary-500: #525252;
    --color-primary-600: #404040;
    --color-primary-700: #262626;
    --color-primary-800: #171717;
    --color-primary-900: #0a0a0a;
    --color-primary-950: #030303;

    --color-secondary: #1E1E1E;
    --color-secondary-50: #f8f8f8;
    --color-secondary-100: #e8e8e8;
    --color-secondary-200: #d3d3d3;
    --color-secondary-300: #a3a3a3;
    --color-secondary-400: #737373;
    --color-secondary-500: #525252;
    --color-secondary-600: #404040;
    --color-secondary-700: #262626;
    --color-secondary-800: #171717;
    --color-secondary-900: #0a0a0a;
    --color-secondary-950: #030303;

    --color-accent-50: #f8f8f8;
    --color-accent-100: #e8e8e8;
    --color-accent-200: #d3d3d3;
    --color-accent-300: #a3a3a3;
    --color-accent-400: #737373;
    --color-accent-500: #525252;
    --color-accent-600: #404040;
    --color-accent-700: #262626;
    --color-accent-800: #171717;
    --color-accent-900: #0a0a0a;
    --color-accent-950: #030303;

    /* Font families */
    --font-sans: 'Sora', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --spacing-18: 4.5rem;
    --spacing-22: 5.5rem;
    --spacing-30: 7.5rem;

    /* Max Widths */
    --max-w-8xl: 88rem;
    --max-w-9xl: 96rem;

    /* Aspect Ratios */
    --aspect-portrait: 3/4;
    --aspect-landscape: 4/3;
    --aspect-ultrawide: 21/9;
  }