/* HouseWinner — design tokens. See docs/DESIGN-SYSTEM.md
   Palette: Lavender (client-specified). */
:root {
    /* --- Client palette (authoritative names) --- */
    --bg:           #FAFAFC;   /* near-white, slightly cool */
    --bg-warm:      #F8F5FF;   /* very subtle lavender tint for sections */
    --surface:      #FFFFFF;
    --surface-elev: #FBF8FF;   /* faint lavender for elevated cards */

    --lavender-50:  #F4F0FF;
    --lavender-100: #EEEAFF;
    --lavender-300: #C3B3FF;
    --lavender-500: #9D7CFF;   /* electric, not muted */
    --lavender-600: #7C5CFF;   /* primary */
    --lavender-800: #4B2EC4;
    --lavender-900: #2E1A7A;   /* deep, for headings on light */

    --gold:      #D4AF37;      /* premium / VIP / winner */
    --gold-warm: #E8C26A;
    --orange:      #FB9404;    /* brand orange (logo) */
    --orange-soft: #FFB546;    /* lighter orange for tints */
    --orange-deep: #D97A00;    /* darker orange for hover/text */
    --success:   #15A552;      /* sold / live */
    --warning:   #E89A2C;      /* countdown urgency */
    --danger:    #DC2A55;

    --ink-900:   #0F0B22;      /* primary text */
    --ink-700:   #2D2547;
    --ink-500:   #5B5570;      /* secondary */
    --ink-300:   #9F94B8;
    --ink-200:   #CFC8DC;
    --hairline:  #EEEAFF;      /* borders */

    /* --- Semantic aliases used across the codebase --- */
    --c-bg: var(--bg);
    --c-bg-2: var(--lavender-50);
    --c-surface: var(--surface);
    --c-surface-elev: var(--surface-elev);
    --c-ink: var(--ink-900);
    --c-ink-2: var(--lavender-900);
    --c-muted: var(--ink-500);
    --c-line: var(--hairline);
    --c-primary: var(--lavender-600);
    --c-primary-2: var(--lavender-500);
    --c-primary-dark: var(--lavender-800);
    --c-cta: var(--lavender-600);
    --c-cta-2: var(--lavender-800);
    --c-cta-hover: #6A24C9;     /* purple/mov hover (less blue) for filled buttons */
    --c-cta-ink: #FFFFFF;
    --c-success: var(--success);
    --c-warn: var(--warning);
    --c-danger: var(--danger);
    --c-gold: var(--gold);
    --c-orange: var(--orange);
    --c-accent: var(--orange);

    /* Typography */
    --font-display: "Cinzel", Georgia, serif;
    --font-body: "Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-100: 0.75rem;
    --fs-200: 0.875rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 1.75rem;
    --fs-700: 2.25rem;
    --fs-800: 3rem;
    --fs-display: clamp(2.75rem, 6vw, 6rem);

    /* Spacing */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --sp-9: 96px; --sp-10: 128px;

    /* Radius — used sparingly */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-pill: 999px;
    --r-input: 10px;

    /* Fusion gradients — purple ⇄ orange brand blend */
    --grad-fusion:      linear-gradient(110deg, var(--lavender-600) 0%, var(--lavender-500) 48%, var(--orange) 112%);
    --grad-fusion-line: linear-gradient(90deg, var(--lavender-600), var(--orange));
    --grad-fusion-rev:  linear-gradient(120deg, var(--orange) -8%, var(--lavender-600) 52%, var(--lavender-800) 116%);

    /* Shadow (lavender-tinted, sparing) */
    --shadow-card: 0 18px 40px -28px rgba(76, 46, 196, 0.30);
    --shadow-pop: 0 24px 60px -24px rgba(46, 26, 122, 0.35);

    /* Layout */
    --container: 1200px;
    --container-wide: 1440px;

    /* Z-index scale */
    --z-base: 1;
    --z-header: 20;
    --z-dropdown: 30;
    --z-modal: 50;
    --z-toast: 60;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 220ms;
}