/* ----------------------------------------
   CSS Variables
---------------------------------------- */
:root {

    /* Colors */
    /* Gold: #bc945c | Gray: #a2a9ad | Black: #25282a */
    --color-text: #25282a;
    --color-black: #25282a;
    --color-gold: #bc945c;
    --color-gray: #a2a9ad;
    --color-bg: #ffffff;
    --color-white: #ffffff;

    /* Fonts */
    --font-body: 'canada-type-gibson', sans-serif;
    --font-heading: 'neue-haas-grotesk-display', sans-serif;

    /* Breakpoints */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;

    /* Spacing */
    --space-xxs: 0.35rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.16);

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;
}