/* ============================================================
   VOZIQA — Design Tokens
   Edit tokens here; they propagate via CSS variables.
   ============================================================ */

:root {
    /* ─── Brand Colors ─── */
    --color-plum: #1A0A2E;
    /* royal plum — primary dark */
    --color-plum-hover: #2A1548;
    --color-plum-soft: #3D2A5C;

    --color-gold: #C9A84C;
    /* champagne gold — accent */
    --color-gold-hover: #B89636;
    --color-gold-soft: #E6D28F;

    --color-ivory: #FBF7F2;
    /* warm ivory — background */
    --color-ivory-dark: #F2EAE0;

    --color-rose: #E8C4B8;
    /* dusty rose — feminine accent */
    --color-rose-soft: #F5E4DE;

    --color-text: #2C2C2C;
    /* body text */
    --color-text-muted: #6B6B6B;
    --color-text-subtle: #767676;

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-border: #E8E2DA;
    --color-border-dark: #D4CBBF;

    /* ─── Semantic ─── */
    --color-success: #2E7D4F;
    --color-warning: #D48C28;
    --color-error: #B73E3E;
    --color-info: #3A6EA5;
    --color-sale: #B73E3E;

    /* ─── Fonts ─── */
    --font-heading: "Playfair Display", "Georgia", serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SF Mono", "Consolas", monospace;

    /* ─── Type Scale (fluid) ─── */
    --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
    --fs-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
    --fs-md: clamp(1.05rem, 1.00rem + 0.30vw, 1.18rem);
    --fs-lg: clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
    --fs-xl: clamp(1.45rem, 1.30rem + 0.75vw, 1.85rem);
    --fs-2xl: clamp(1.80rem, 1.50rem + 1.5vw, 2.60rem);
    --fs-3xl: clamp(2.25rem, 1.80rem + 2.25vw, 3.50rem);
    --fs-4xl: clamp(2.75rem, 2.10rem + 3.25vw, 4.50rem);

    /* ─── Weights ─── */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ─── Spacing (8pt grid) ─── */
    --sp-1: 0.25rem;
    /* 4px */
    --sp-2: 0.5rem;
    /* 8px */
    --sp-3: 0.75rem;
    /* 12px */
    --sp-4: 1rem;
    /* 16px */
    --sp-5: 1.5rem;
    /* 24px */
    --sp-6: 2rem;
    /* 32px */
    --sp-7: 3rem;
    /* 48px */
    --sp-8: 4rem;
    /* 64px */
    --sp-9: 6rem;
    /* 96px */
    --sp-10: 8rem;
    /* 128px */

    /* ─── Radii ─── */
    --r-none: 0;
    --r-sm: 2px;
    --r-md: 4px;
    --r-lg: 8px;
    --r-xl: 16px;
    --r-full: 9999px;

    /* ─── Shadows ─── */
    --shadow-sm: 0 1px 2px rgba(26, 10, 46, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 10, 46, 0.06);
    --shadow-lg: 0 12px 32px rgba(26, 10, 46, 0.08);
    --shadow-xl: 0 24px 64px rgba(26, 10, 46, 0.12);
    --shadow-gold: 0 8px 24px rgba(201, 168, 76, 0.25);

    /* ─── Layout ─── */
    --container-max: 1320px;
    --container-narrow: 960px;
    --container-wide: 1540px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    --nav-height: 72px;
    --announcement-height: 40px;

    /* ─── Transitions ─── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    /* ─── Z-index ─── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
    --z-loader: 9999;
}

/* Dark-ready (reserved; not used at launch) */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }

    /* force light for brand consistency */
}