/* Design System Tokens — Badya "Golden Hour" */
:root {
    /* ── Brand palette (golden-hour) ────────────────────────── */
    /* Primary action color = deep sunset orange (saturated, premium) */
    --color-coral: #F97316;          /* bright orange — replaces "coral" role */
    --color-coral-light: #FB923C;
    --color-coral-dark: #EA580C;

    /* Secondary accent: golden honey (warm yellow for highlights) */
    --color-honey: #F59E0B;
    --color-honey-light: #FBBF24;
    --color-honey-dark: #D97706;

    /* Deep amber for accents on dark backgrounds */
    --color-amber: #B45309;
    --color-amber-deep: #92400E;

    /* Soft peach — backgrounds + glass */
    --color-peach: #FED7AA;
    --color-peach-light: #FFEDD5;
    --color-peach-dark: #FDBA74;

    /* Sunset teal kept as cool counterpoint (subtle) */
    --color-teal: #0D9488;
    --color-teal-light: #14B8A6;
    --color-teal-dark: #115E59;

    /* ── Neutrals (warm brown scale — pairs with golden hour) ── */
    --neutral-50:  #FDFBF7;          /* warm cream */
    --neutral-100: #FAF5EB;
    --neutral-200: #F2E8D5;          /* soft almond */
    --neutral-300: #E6D5B8;
    --neutral-400: #C2A878;
    --neutral-500: #8B6F4E;
    --neutral-600: #6B5237;
    --neutral-700: #4A3722;          /* deep cocoa */
    --neutral-800: #2D1F12;          /* coffee bean */
    --neutral-900: #1A1108;          /* espresso */

    /* ── Backgrounds ────────────────────────────────────────── */
    /* Default surface — sun-warmed cream */
    --color-bg: #FFFBF1;
    --color-bg-warm: #FEF3D8;        /* gentle golden tint (hero) */
    --color-bg-light: #FFF4DA;       /* alternate warm panel */
    --color-bg-glow: linear-gradient(180deg, #FEF3D8 0%, #FFE4B5 50%, #FED7AA 100%);
    --color-bg-dark: #1A1108;         /* deep coffee for dark sections */
    --color-bg-dark-2: #2D1F12;
    --color-white: #FFFFFF;

    /* ── Text ───────────────────────────────────────────────── */
    /* Deep cocoa-brown headlines (12:1+ contrast on cream bg) */
    --color-text: #2D1F12;
    --color-text-body: #5C4533;       /* warm walnut for body */
    --color-text-muted: #8B6F4E;      /* tan for muted */
    --color-text-light: #C2A878;
    --color-text-inverse: #FFFBF1;

    /* ── Content type accents ───────────────────────────────── */
    --color-youtube: #DC2626;
    --color-pdf: #059669;
    --color-article: #2563EB;

    /* ── Borders ────────────────────────────────────────────── */
    --border-subtle: 1px solid rgba(180, 83, 9, 0.12);
    --border-default: 1px solid rgba(180, 83, 9, 0.20);
    --border-warm: 1px solid rgba(217, 119, 6, 0.25);

    /* ── Golden hour glow tokens (for atmospheric lighting) ── */
    --glow-amber: 0 0 60px rgba(245, 158, 11, 0.35);
    --glow-orange: 0 0 80px rgba(249, 115, 22, 0.30);
    --glow-honey-soft: 0 0 40px rgba(251, 191, 36, 0.40);
    --flare-warm: radial-gradient(circle, rgba(254, 215, 170, 0.65) 0%, rgba(253, 230, 138, 0.30) 30%, transparent 70%);
    --flare-amber: radial-gradient(circle, rgba(245, 158, 11, 0.50) 0%, rgba(251, 146, 60, 0.25) 35%, transparent 75%);

    /* ── Spacing scale (8pt grid) ───────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;

    /* ── Radii ──────────────────────────────────────────────── */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── Shadows (warm golden hour depth) ───────────────────── */
    --shadow-card: 0 1px 2px rgba(120, 53, 15, 0.06), 0 4px 16px rgba(180, 83, 9, 0.08);
    --shadow-card-hover: 0 2px 4px rgba(120, 53, 15, 0.08), 0 12px 32px rgba(180, 83, 9, 0.15);
    --shadow-cta: 0 4px 14px rgba(249, 115, 22, 0.35), 0 1px 2px rgba(249, 115, 22, 0.20);
    --shadow-cta-hover: 0 8px 28px rgba(249, 115, 22, 0.50), 0 2px 6px rgba(249, 115, 22, 0.30);
    --shadow-elevated: 0 4px 12px rgba(120, 53, 15, 0.10), 0 24px 48px rgba(120, 53, 15, 0.18);
    --shadow-phone: 0 24px 60px rgba(120, 53, 15, 0.25);
    --shadow-glow-warm: 0 0 40px rgba(251, 191, 36, 0.30), 0 12px 32px rgba(249, 115, 22, 0.20);

    /* ── Transitions ────────────────────────────────────────── */
    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Container ──────────────────────────────────────────── */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* ── Typography ─────────────────────────────────────────── */
    --font-heading: 'Fraunces', 'Times New Roman', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type scale tokens */
    --fs-hero: clamp(2.75rem, 6vw, 4.75rem);
    --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
    --fs-h2: clamp(1.875rem, 3.5vw, 2.75rem);
    --fs-h3: clamp(1.375rem, 2vw, 1.625rem);
    --fs-h4: 1.125rem;
    --fs-body: 1.0625rem;
    --fs-body-lg: 1.1875rem;
    --fs-small: 0.9375rem;
    --fs-xs: 0.8125rem;

    /* ── Z-index scale ──────────────────────────────────────── */
    --z-base: 1;
    --z-content: 2;
    --z-nav: 100;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 1500;
}

html,
body {
    overflow-x: clip;
}

/* Base body styles */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    color: var(--color-text-body);
    background-color: var(--color-bg);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Subtle warm grain texture overlay (golden hour noise) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.82 0 0 0 0 0.55 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.04;
    pointer-events: none;
    z-index: var(--z-base);
}

/* Atmospheric "golden hour" vignette — soft radial warmth on every page */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(253, 230, 138, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(254, 215, 170, 0.20) 0%, transparent 45%);
    pointer-events: none;
    z-index: var(--z-base);
}

/* ── Typography hierarchy ─────────────────────────────────── */
h1, h2 {
    font-family: var(--font-heading);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p {
    color: var(--color-text-body);
    line-height: 1.65;
}

strong, b {
    font-weight: 700;
    color: var(--color-text);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    position: relative;
    z-index: var(--z-content);
}

/* Selection */
::selection {
    background-color: var(--color-coral);
    color: var(--color-white);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-coral);
    outline-offset: 3px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
    outline-offset: 4px;
}

/* Cursor styling for interactive elements */
a,
button,
[role="button"],
.magnetic-btn,
input,
select,
textarea {
    cursor: pointer;
}

/* Section base */
section {
    position: relative;
    padding-block: var(--space-16);
}

@media (max-width: 768px) {
    section {
        padding-block: var(--space-12);
    }
}

/* Section headers */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-12);
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-amber);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-5);
}

.section-title {
    font-size: var(--fs-h1);
    font-family: var(--font-heading);
    font-variation-settings: 'opsz' 144, 'SOFT' 60;
    font-weight: 600;
    margin-bottom: var(--space-5);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.section-subtitle {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 640px;
    margin-inline: auto;
}

.section-header.light .section-eyebrow {
    color: var(--color-honey-light);
}

.section-header.light .section-title {
    color: var(--color-white);
}

.section-header.light .section-subtitle {
    color: var(--color-peach);
}

/* ── Wave divider (top + bottom flowing waves) ─────────────── */
/* Use as <div class="wave-divider wave-divider--top"><svg>... */
.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}

.wave-divider--top {
    top: 0;
    transform: translateY(-50%);
}

.wave-divider--bottom {
    bottom: 0;
    transform: translateY(50%);
}

.wave-divider svg {
    width: 100%;
    height: 80px;
    display: block;
}

@media (max-width: 768px) {
    .wave-divider svg {
        height: 50px;
    }
}

/* ── Petal / leaf decorative overlay ──────────────────────── */
.decor-petal {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    filter: drop-shadow(0 12px 30px rgba(217, 119, 6, 0.25));
    will-change: transform;
}

/* Hero leaves banner image */
.hero-leaves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.decor-petal--bottom-left {
    bottom: -100px;
    left: -120px;
    width: 380px;
    transform: rotate(150deg);
    animation: petal-float 13s ease-in-out infinite;
}

.decor-petal--bottom-right {
    bottom: -80px;
    right: -100px;
    width: 320px;
    transform: rotate(-150deg);
    animation: petal-float 10s ease-in-out infinite reverse;
}

@keyframes petal-float {
    0%, 100% { transform: rotate(var(--rot, -25deg)) translate(0, 0); }
    50%      { transform: rotate(var(--rot, -25deg)) translate(8px, 14px); }
}

/* ── Sparkle particles (subtle golden twinkle) ──────────────── */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-honey-light);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.55);
    animation: sparkle-twinkle 3.5s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .decor-petal,
    .sparkle,
    .blob {
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    .hero-leaves {
        height: auto;
        max-height: 40vh;
        object-fit: cover;
    }
}