/*
  Design System - Neo-Brutalist Luxe
  Custom properties for consistent theming
*/

:root {
    /* Colors - Mid-Century Modern Palette */
    --bg-primary: #faf8f5;
    /* Off-white/warm cream */
    --bg-secondary: #f5f3f0;
    /* Slightly darker cream */
    --bg-tertiary: #eae8e4;
    /* Light warm gray */
    --text-primary: #1a1a1a;
    /* Rich black */
    --text-secondary: #4a4a4a;
    /* Medium gray */
    --text-tertiary: #8a8a8a;
    /* Light gray */
    --accent-primary: #d4af37;
    /* Classic gold */
    --accent-secondary: #b8941f;
    /* Darker gold */
    --accent-glow: rgba(212, 175, 55, 0.2);
    --border: rgba(26, 26, 26, 0.1);
    --border-bright: rgba(26, 26, 26, 0.2);

    /* Typography Scale - Minimalist / Zoomed Out (Brittany Chiang v4 style) */
    --font-display: 'DM Sans', sans-serif;
    /* Switch to cleaner sans for display */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Much smaller, tighter scale */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    /* Standard body text reduced */
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    /* Max header size much smaller */

    /* Spacing Scale - Tightened */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Layout - Tighter container for zoomed out feel */
    --max-width: 1000px;
    /* Reduced from 1400px */
    --section-padding: clamp(60px, 10vh, 100px);
    --gutter: 24px;

    /* Animation Timings */
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.6s;
    --duration-slower: 0.8s;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px var(--accent-glow);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Z-index Scale */
    --z-background: -1;
    --z-base: 0;
    --z-content: 10;
    --z-header: 100;
    --z-overlay: 1000;
    --z-cursor: 10000;
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* Light theme override (if needed in future) */
@media (prefers-color-scheme: light) {
    .force-dark {
        color-scheme: dark;
    }
}