/*
 * Wedding Theme — GARDEN
 * Sage greens, botanical vibes, organic warmth, nature-inspired.
 * Override these custom properties to reskin the entire theme.
 */

:root {
    /* ── Colors ── */
    --color-primary: #7d8c6e;
    --color-primary-light: #a3b18a;
    --color-primary-dark: #5a6b4a;
    --color-secondary: #5c5c4e;
    --color-accent: #c9a96e;
    --color-text: #3e3e36;
    --color-text-light: #5e5e54; /* Darkened for WCAG AA 4.5:1 contrast on #fefdfb */
    --color-heading: #2d3328;
    --color-bg: #fefdfb;
    --color-bg-alt: #f4f1eb;
    --color-bg-dark: #2d3328;
    --color-border: #ddd8ce;
    --color-white: #ffffff;
    --color-overlay: rgba(45, 51, 40, 0.35);
    --color-action: #5a6b4a;
    --color-action-hover: #47533a;
    --color-on-action: #ffffff;

    /* ── Typography ── */
    --font-script: 'Cormorant', Georgia, serif;
    --font-heading: 'Cormorant', Georgia, serif;
    --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Font Sizes ── */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-hero: clamp(3.5rem, 10vw, 7rem);

    /* ── Spacing ── */
    --section-padding: 5rem;
    --container-max: 1200px;
    --container-narrow: 800px;
    --gap-sm: 1rem;
    --gap-md: 2rem;
    --gap-lg: 3rem;
    --gap-xl: 4rem;

    /* ── Effects ── */
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    --shadow-sm: 0 2px 6px rgba(45, 51, 40, 0.06);
    --shadow-md: 0 4px 14px rgba(45, 51, 40, 0.08);
    --shadow-lg: 0 8px 30px rgba(45, 51, 40, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
}

/* ── Garden Overrides ── */

.couple-names {
    font-family: var(--font-script);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 500;
}

.section-script {
    font-family: var(--font-script);
    font-size: var(--text-4xl);
    font-weight: 700;
}

.font-script {
    font-family: var(--font-script);
    font-weight: 700;
    font-size: 1.6em;
}

.section-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.hero {
    background-attachment: scroll;
}

.hero-text {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 700;
}

.nav-link::after {
    background: var(--color-primary);
    border-radius: 2px;
}

.card {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background: var(--color-white);
}

.party-member img {
    border-radius: 50%;
    border: 4px solid var(--color-bg-alt);
}

.party-member:hover img {
    border-color: var(--color-primary-light);
}

.btn-primary {
    border-radius: var(--radius-full);
}

.btn-outline {
    border-radius: var(--radius-full);
}

.gallery-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.gallery-item {
    border-radius: var(--radius-md);
}

.gallery-item img {
    border-radius: var(--radius-md);
}

.rsvp-input {
    border-radius: var(--radius-sm);
}

.top-bar {
    background: var(--color-bg-alt);
    border-bottom: none;
}