/* =========================================================
   RV Affiliate — Design System Variables
   Brand Direction: Crimson Depth + Obsidian Black + Soft Pearl
   Visual System: Premium editorial — alternating dark / light
   ========================================================= */

/* Google Fonts — Manrope (sans) + Cormorant Garamond (editorial serif) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root,
[data-theme="light"] {
    /* ─── Shared Theme Tokens — Light Mode ─────────────────── */
    --page-bg: #F2F1ED;
    /* Soft Pearl page background */
    --surface: #FFFFFF;
    /* Pure white card / panel surface */
    --surface-soft: #ECEAE5;
    /* Subtly recessed light surface */
    --surface-elevated: #FFFFFF;
    /* Elevated surface */

    --text-primary: #161616;
    /* Obsidian primary text & headings */
    --text-secondary: #5F5F5F;
    /* Secondary body & description text */
    --text-muted: #7A7A7A;
    /* Meta, timestamps, subdued text */

    --border: #DEDAD3;
    /* Soft neutral gray border */
    --border-strong: #CEC9C1;
    /* Defined control & input border */

    --header-bg: #F2F1ED;
    /* Light header background */
    --header-scrolled: rgba(242, 241, 237, 0.95);
    --header-text: #161616;
    /* Dark header text */
    --header-border: #DEDAD3;

    --footer-bg: #F2F1ED;
    /* Light footer background */
    --footer-text: #161616;
    /* Dark footer headings */
    --footer-muted: #5F5F5F;
    /* Medium gray footer text & links */
    --footer-border: #DEDAD3;

    --hero-bg: linear-gradient(160deg, #F2F1ED 0%, #EAE7E0 100%);
    --hero-glow: radial-gradient(circle at center, rgba(113, 0, 20, 0.04) 0%, rgba(113, 0, 20, 0.01) 40%, rgba(242, 241, 237, 0) 80%);

    --brand: #710014;
    /* Approved Crimson Depth primary */
    --brand-strong: #8D0018;
    /* Hover / pressed crimson state */

    --button-dark: #161616;
    /* Dark button surface */
    --button-dark-text: #FFFFFF;
    /* Light button text */

    --shadow: rgba(0, 0, 0, 0.08);
    /* Soft ambient card shadow */

    /* Section Tokens — Dynamically Adapts to Light Mode */
    --dark-section-bg: var(--page-bg);
    --dark-section-surface: var(--surface);
    --dark-section-text: var(--text-primary);
    --dark-section-muted: var(--text-secondary);
    --dark-section-border: var(--border);

    --light-section-bg: var(--page-bg);
    --light-section-surface: var(--surface);
    --light-section-text: var(--text-primary);
    --light-section-muted: var(--text-secondary);
    --light-section-border: var(--border);

    /* ─── Backward-Compatibility Aliases — Light Mode ──────── */
    --clr-bg: var(--page-bg);
    --clr-surface: var(--surface);
    --clr-surface-alt: var(--surface-soft);
    --clr-pearl: var(--page-bg);
    --clr-white: var(--surface);
    --clr-pearl-card: var(--surface);
    --clr-bg-light: var(--page-bg);
    --clr-bg-warm-light: var(--page-bg);
    --clr-ivory-soft: var(--surface);

    --clr-crimson: var(--brand);
    --clr-crimson-deep: var(--brand-strong);
    --clr-crimson-subtle: rgba(113, 0, 20, 0.10);
    --clr-crimson-border: rgba(113, 0, 20, 0.18);
    --clr-crimson-border-hover: rgba(113, 0, 20, 0.38);
    --clr-warm-sand: #A20D2A;
    --clr-warm-sand-subtle: rgba(113, 0, 20, 0.10);
    --clr-warm-sand-border: rgba(113, 0, 20, 0.18);
    --clr-gold: var(--brand);
    --clr-gold-bright: var(--brand-strong);
    --clr-orange: var(--brand);

    --clr-ivory: var(--text-primary);
    --clr-gray: var(--text-muted);
    --clr-obsidian: var(--text-primary);
    --clr-text-dark: var(--text-primary);
    --clr-text-mid: var(--text-secondary);

    --clr-soft-border: var(--border);
    --clr-dark-border: var(--border);
    --clr-light-border: var(--border);

    /* ─── Typography System ─────────────────────────────────── */
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-editorial: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* ─── Font Sizes ────────────────────────────────────────── */
    --fs-hero: clamp(40px, 5vw, 76px);
    --fs-h2: clamp(30px, 4vw, 50px);
    --fs-h3: clamp(22px, 2.5vw, 34px);
    --fs-card-title: clamp(17px, 1.8vw, 21px);
    --fs-body: clamp(15px, 1.4vw, 17px);
    --fs-nav: 15px;
    --fs-small: 13px;

    /* ─── Line Heights ──────────────────────────────────────── */
    --lh-tight: 1.08;
    --lh-base: 1.65;

    /* ─── Border Radius ─────────────────────────────────────── */
    --br-card: 20px;
    --br-feature: 28px;
    --br-btn: 10px;
    --br-pill: 100px;

    /* ─── Spacing ───────────────────────────────────────────── */
    --space-section: clamp(60px, 8vw, 120px);
    --space-element: clamp(24px, 3vw, 32px);
    --container-max: 1280px;
    --container-padding: 24px;

    /* ─── Transitions ───────────────────────────────────────── */
    --transition-fast: 220ms ease;
    --transition-base: 340ms ease;
    --transition-slow: 500ms ease;
}

/* ─────────────────────────────────────────────────────────
   DARK THEME OVERRIDES  [data-theme="dark"] on <html>
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* ─── Shared Theme Tokens — Dark Mode ──────────────────── */
    --page-bg: #111111;
    /* Obsidian dark page background */
    --surface: #1A1A1A;
    /* Charcoal card / surface */
    --surface-soft: #202020;
    /* Slightly deeper dark surface */
    --surface-elevated: #242424;
    /* Elevated modal/card surface */

    --text-primary: #F2F1ED;
    /* Off-white primary text & headings */
    --text-secondary: #C8C8C8;
    /* Softened secondary body text */
    --text-muted: #9A9490;
    /* Meta, timestamps, subdued text */

    --border: #2D2D2D;
    /* Dark subtle border */
    --border-strong: #3A3A3A;
    /* Defined dark control border */

    --header-bg: #111111;
    /* Obsidian dark header */
    --header-scrolled: rgba(17, 17, 17, 0.95);
    --header-text: #F2F1ED;
    /* Light header text */
    --header-border: #2D2D2D;

    --footer-bg: #111111;
    /* Dark footer background */
    --footer-text: #F2F1ED;
    /* Light footer headings */
    --footer-muted: #9A9490;
    /* Lighter gray footer text & links */
    --footer-border: #2D2D2D;

    --hero-bg: linear-gradient(160deg, #111111 0%, #1A1A1A 100%);
    --hero-glow: radial-gradient(circle at center, rgba(162, 13, 42, 0.05) 0%, rgba(113, 0, 20, 0.12) 30%, rgba(22, 22, 22, 0) 80%);

    --brand: #710014;
    /* Approved Crimson Depth primary */
    --brand-strong: #990019;
    /* Hover state */

    --button-dark: #F2F1ED;
    /* High contrast button */
    --button-dark-text: #161616;
    /* Dark button text */

    --shadow: rgba(0, 0, 0, 0.35);
    /* Deeper shadow for dark surfaces */

    /* Section Tokens — Dynamically Adapts to Dark Mode */
    --dark-section-bg: var(--page-bg);
    --dark-section-surface: var(--surface);
    --dark-section-text: var(--text-primary);
    --dark-section-muted: var(--text-secondary);
    --dark-section-border: var(--border);

    --light-section-bg: var(--page-bg);
    --light-section-surface: var(--surface);
    --light-section-text: var(--text-primary);
    --light-section-muted: var(--text-secondary);
    --light-section-border: var(--border);

    /* ─── Backward-Compatibility Aliases — Dark Mode ───────── */
    --clr-bg: var(--page-bg);
    --clr-surface: var(--surface);
    --clr-surface-alt: var(--surface-soft);
    --clr-pearl: var(--page-bg);
    --clr-white: var(--surface);
    --clr-pearl-card: var(--surface);
    --clr-bg-light: var(--page-bg);
    --clr-bg-warm-light: var(--page-bg);
    --clr-ivory-soft: var(--surface);

    --clr-crimson: var(--brand);
    --clr-crimson-deep: var(--brand-strong);
    --clr-crimson-subtle: rgba(113, 0, 20, 0.18);
    --clr-crimson-border: rgba(113, 0, 20, 0.28);
    --clr-crimson-border-hover: rgba(113, 0, 20, 0.45);
    --clr-warm-sand: #A20D2A;
    --clr-warm-sand-subtle: rgba(113, 0, 20, 0.18);
    --clr-warm-sand-border: rgba(113, 0, 20, 0.28);
    --clr-gold: var(--brand);
    --clr-gold-bright: var(--brand-strong);
    --clr-orange: var(--brand);

    --clr-ivory: var(--text-primary);
    --clr-gray: var(--text-muted);
    --clr-obsidian: var(--text-primary);
    --clr-text-dark: var(--text-primary);
    --clr-text-mid: var(--text-secondary);

    --clr-soft-border: var(--border);
    --clr-dark-border: var(--border);
    --clr-light-border: var(--border);
}

/* ─────────────────────────────────────────────────────────
   SYSTEM PREFERENCE FALLBACK
   ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-bg: #111111;
        --surface: #1A1A1A;
        --surface-soft: #202020;
        --surface-elevated: #242424;

        --text-primary: #F2F1ED;
        --text-secondary: #C8C8C8;
        --text-muted: #9A9490;

        --border: #2D2D2D;
        --border-strong: #3A3A3A;

        --header-bg: #111111;
        --header-scrolled: rgba(17, 17, 17, 0.95);
        --header-text: #F2F1ED;
        --header-border: #2D2D2D;

        --footer-bg: #111111;
        --footer-text: #F2F1ED;
        --footer-muted: #9A9490;
        --footer-border: #2D2D2D;

        --hero-bg: linear-gradient(160deg, #111111 0%, #1A1A1A 100%);
        --hero-glow: radial-gradient(circle at center, rgba(162, 13, 42, 0.05) 0%, rgba(113, 0, 20, 0.12) 30%, rgba(22, 22, 22, 0) 80%);

        --brand: #710014;
        --brand-strong: #990019;

        --button-dark: #F2F1ED;
        --button-dark-text: #161616;

        --shadow: rgba(0, 0, 0, 0.35);

        --dark-section-bg: var(--page-bg);
        --dark-section-surface: var(--surface);
        --dark-section-text: var(--text-primary);
        --dark-section-muted: var(--text-secondary);
        --dark-section-border: var(--border);

        --light-section-bg: var(--page-bg);
        --light-section-surface: var(--surface);
        --light-section-text: var(--text-primary);
        --light-section-muted: var(--text-secondary);
        --light-section-border: var(--border);

        --clr-bg: var(--page-bg);
        --clr-surface: var(--surface);
        --clr-surface-alt: var(--surface-soft);
        --clr-pearl: var(--page-bg);
        --clr-white: var(--surface);
        --clr-pearl-card: var(--surface);
        --clr-bg-light: var(--page-bg);
        --clr-bg-warm-light: var(--page-bg);
        --clr-ivory-soft: var(--surface);

        --clr-crimson: var(--brand);
        --clr-crimson-deep: var(--brand-strong);
        --clr-crimson-subtle: rgba(113, 0, 20, 0.18);
        --clr-crimson-border: rgba(113, 0, 20, 0.28);
        --clr-crimson-border-hover: rgba(113, 0, 20, 0.45);
        --clr-warm-sand: #A20D2A;
        --clr-warm-sand-subtle: rgba(113, 0, 20, 0.18);
        --clr-warm-sand-border: rgba(113, 0, 20, 0.28);
        --clr-gold: var(--brand);
        --clr-gold-bright: var(--brand-strong);
        --clr-orange: var(--brand);

        --clr-ivory: var(--text-primary);
        --clr-gray: var(--text-muted);
        --clr-obsidian: var(--text-primary);
        --clr-text-dark: var(--text-primary);
        --clr-text-mid: var(--text-secondary);

        --clr-soft-border: var(--border);
        --clr-dark-border: var(--border);
        --clr-light-border: var(--border);
    }
}

/* =====================================================
   Reset
   ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--clr-bg);
    color: var(--clr-ivory);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    display: block;
}

/* =====================================================
   Utility Classes
   ===================================================== */
.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.text-gray {
    color: var(--clr-gray);
}

/* =====================================================
   Typography Base
   ===================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--clr-ivory);
}

h1 {
    font-size: var(--fs-hero);
    font-weight: 500;
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: var(--br-btn);
    font-size: var(--fs-nav);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
}

/* Primary — Crimson Depth */
.btn-primary {
    background-color: var(--clr-crimson);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: var(--clr-crimson-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(113, 0, 20, 0.28);
}

/* Secondary — matches View Deal button style */
.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(113, 0, 20, 0.06);
    transform: translateY(-2px);
}

/* Text Link */
.text-link {
    font-size: var(--fs-nav);
    font-weight: 600;
    color: var(--clr-gray);
    transition: color var(--transition-fast);
}

.text-link:hover {
    color: var(--clr-crimson);
}

/* =====================================================
   Eyebrow Label
   ===================================================== */
.eyebrow {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--clr-crimson);
    margin-bottom: 16px;
    opacity: 0.90;
}