/**
 * CSS Custom Properties (Variables)
 *
 * Keep in sync with /config/design-tokens.php
 *
 * @package enhed
 */

:root {
    /* Brand Colors */
    --color-sand: #EAC58D;
    --color-greige: #A88F7A;
    --color-mauve: #AE718C;
    --color-chokolade: #3D1C0F;

    /* UI Colors */
    --color-paper: #FFF4E6;
    --color-secondary: #EFE7DE;
    --color-lines: #D6C9BD;
    --color-text-primary: #2E1A12;
    --color-text-secondary: #6B5A4E;
    --color-action: #C8944F;

    /* Utility Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-error: #C54B4B;
    --color-success: #4B8C5B;

    /* Typography */
    --font-accent: 'Fraunces', serif;
    --font-ui: 'Quicksand', sans-serif;
    --font-body: 'Manrope', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3rem;
    --text-5xl: 4rem;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;

    /* Spacing */
    --spacing-section: 6rem;
    --spacing-section-mobile: 4rem;
    --spacing-container: 1200px;
    --spacing-container-narrow: 800px;
    --spacing-gap: 2rem;
    --spacing-gap-sm: 1rem;
    --spacing-gap-lg: 3rem;
    --spacing-gap-xl: 4rem;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Breakpoints (for reference - use in media queries) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1200px;

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

    /* Effects - Glass */
    --glass-bg: rgba(255, 244, 230, 0.08);
    --glass-bg-light: rgba(255, 244, 230, 0.7);
    --glass-bg-medium: rgba(255, 244, 230, 0.85);
    --glass-border: rgba(168, 143, 122, 0.2);
    --glass-border-light: rgba(168, 143, 122, 0.1);
    --glass-blur: 24px;

    /* Effects - Shadows */
    --shadow-soft: 0 8px 32px rgba(61, 28, 15, 0.06);
    --shadow-medium: 0 12px 40px rgba(61, 28, 15, 0.08);
    --shadow-strong: 0 16px 48px rgba(61, 28, 15, 0.12);
    --shadow-inner: inset 0 2px 4px rgba(61, 28, 15, 0.04);

    /* Effects - Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Gradients */
    --gradient-dark: linear-gradient(145deg, #3D1C0F 0%, #4a2518 30%, #5a3035 55%, #7a5a68 80%, #A88F7A 100%);
    --gradient-dark-vertical: linear-gradient(180deg, #3D1C0F 0%, #4a2518 40%, #5a3035 70%, #7a5a68 90%, #A88F7A 100%);
    --gradient-sand: linear-gradient(135deg, #EAC58D 0%, #C8944F 100%);
    --gradient-paper: linear-gradient(180deg, #FFF4E6 0%, #EFE7DE 100%);

    /* Z-index Scale */
    --z-behind: -1;
    --z-base: 0;
    --z-above: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* Dark section color overrides */
.section--dark {
    --color-text-primary: #FFF4E6;
    --color-text-secondary: rgba(255, 244, 230, 0.8);
    --glass-bg: rgba(255, 244, 230, 0.08);
    --glass-border: rgba(255, 244, 230, 0.15);
}