:root {
    /* Brand Colors */
    --color-bg: #FDF7F1;
    --color-primary: #5B65AE;
    --color-text: #1a1a1a;
    --color-text-light: #555;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f0ea;
    --color-primary-dark: #4a5499;
    --color-primary-light: rgba(91, 101, 174, 0.08);

    /* Typography — Refined Scale */
    --font-heading: 'TheYearofHandicrafts', sans-serif;
    --font-body: 'TheYearofHandicrafts', sans-serif;

    --text-display-xl: clamp(2.8rem, 4vw + 1rem, 5.5rem);
    --text-display-l: clamp(2rem, 3vw + 0.5rem, 3.5rem);
    --text-display-m: clamp(1.4rem, 1.5vw + 0.5rem, 2rem);
    --text-body-large: clamp(1.05rem, 0.5vw + 0.8rem, 1.2rem);
    --text-body: 0.95rem;
    --text-micro: 0.75rem;

    /* 8px Grid Spacing */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-12: 96px;
    --space-16: 128px;

    /* Z-Index */
    --z-normal: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-cursor: 999;

    /* Easing */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}