/* Animatable custom property for smooth accent color transitions */
@property --color-accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #C8A87E;
}

:root {
    /* Colors */
    --color-bg: #000000;
    --color-text: #FFFFFF;
    --color-text-muted: #888888;
    --color-border: #333333;
    --color-accent: #C8A87E;

    /* Typography */
    --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', Courier, monospace;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;

    --fs-hero-name: clamp(3.5rem, 8vw, 7rem);
    --fs-showcase-title: clamp(2rem, 5vw, 3.5rem);
    --fs-page-title: clamp(2rem, 5vw, 3.5rem);
    --fs-body: clamp(0.85rem, 1.1vw, 1rem);
    --fs-small: clamp(0.7rem, 0.8vw, 0.8rem);
    --fs-nav: 0.75rem;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Layout */
    --container-max: 1440px;
    --container-padding: clamp(1.5rem, 4vw, 4rem);
    --nav-height: 56px;
    --grid-gap: 1.5rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --accent-transition: 600ms ease;

    /* Animations */
    --reveal-duration: 800ms;
    --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --reveal-distance: 40px;
    --reveal-stagger: 100ms;
    --hero-duration: 1000ms;
    --hero-stagger: 150ms;

    /* Borders */
    --border-thin: 1px solid var(--color-border);
    --border-white: 1px solid var(--color-text);
}