:root {
    /* ===== Brand (Pastel Wedding) ===== */
    --app-primary: #C6A19A;
    --app-primary-rgb: 198, 161, 154;
    --app-primary-hover: #B58F88;
    --app-primary-active: #A67F78;
    --app-primary-soft: #F4E9E6;
    --app-primary-soft-hover: #EBDDD8;
    --app-primary-soft-active: #E1CEC8;
    --app-accent: #DCC2BC;
    --app-accent-rgb: 220, 194, 188;


    /* ===== Navbar ===== */
    --app-navbar-bg: #FCF7F4;
    --app-navbar-border: #EDE3DE;
    --app-navbar-link: #897972;
    --app-navbar-link-hover: #B58F88;
    --app-navbar-link-active: #B58F88;

    /* ===== Base Surfaces ===== */
    --app-bg: #FFFCFB;
    --app-bg-rgb: 255, 252, 251;

    --app-surface: #FFFFFF;
    --app-surface-rgb: 255, 255, 255;

    --app-border: #EFE6E2;
    --app-divider: #F7F1EE;



    /* ===== Sections ===== */
    --app-section-odd: #FFFCFB;
    --app-section-even: #FDF7F4;
    --app-section-highlight: #F9F0EB;
    --app-testimonials-bg: #FFFFFF;

    /* ===== Typography ===== */
    --app-heading: #544741;
    --app-heading-rgb: 84, 71, 65;

    --app-text: #796A63;
    --app-text-rgb: 121, 106, 99;

    --app-text-muted: #A0918A;
    --app-text-muted-rgb: 160, 145, 138;

    /* ===== Cards ===== */
    --app-card-bg: #FFFFFF;
    --app-card-border: #EFE6E2;
    --app-card-shadow: 0 8px 24px rgba(99, 79, 71, 0.06);

    /* ===== Footer / Newsletter ===== */
    --app-footer-bg: #EFE0D9;
    --app-footer-text: #624F47;
    --app-footer-link: #876A60;
    --app-footer-link-hover: #624F47;
    --app-newsletter-bg: #EAD9D1;

    /* ===== Buttons ===== */
    --app-btn-primary-bg: #BC8F87;
    --app-btn-primary-color: #FFFFFF;
    --app-btn-primary-hover: #A97C74;
    --app-btn-primary-active: #946A63;

    --app-btn-secondary-bg: #F4E9E6;
    --app-btn-secondary-color: #66544D;
    --app-btn-secondary-hover: #EBDCD7;
    --app-btn-secondary-active: #E1CEC8;

    --app-btn-outline-color: #BC8F87;
    --app-btn-outline-border: #BC8F87;
    --app-btn-outline-hover-bg: #BC8F87;
    --app-btn-outline-hover-color: #FFFFFF;

    --app-focus-ring: rgba(188, 143, 135, 0.22);

    /* ===== Forms ===== */
    --app-input-bg: #FFFFFF;
    --app-input-border: #E8DBD5;
    --app-input-placeholder: #BEAEA7;
    --app-input-focus-border: #BC8F87;
    --app-input-focus-ring: rgba(188, 143, 135, 0.2);

    /* ===== Alerts / Status ===== */
    --app-success-bg: #E7F0E8;
    --app-success-text: #4D6953;
    --app-warning-bg: #FAF0DD;
    --app-warning-text: #7E6633;
    --app-danger-bg: #F8E6EA;
    --app-danger-text: #8D4F5E;
    --app-info-bg: #EAF1F7;
    --app-info-text: #4A647E;

    /* ===== Hero ===== */
    --app-hero-overlay: linear-gradient(
        180deg,
        rgba(84, 71, 65, 0.24) 0%,
        rgba(84, 71, 65, 0.38) 100%
    );
    --app-hero-subtitle: rgba(255, 255, 255, 0.88);

}

/* ===== Navbar height offset ===== */
:root {
    --navbar-height: 64px;
}

@media (max-width: 1023px) {
    :root {
        --navbar-height: 56px;
    }
}

body {
    background-color: var(--app-bg);
    color: var(--app-text);
    padding-top: var(--navbar-height);
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--app-heading);
}

.font-script {
    font-family: 'Gwendolyn', 'Cormorant Garamond', cursive;
    font-weight: 400;
}

body.no-navbar-offset {
    padding-top: 0;
}

.bg-hero-overlay {
    background: var(--app-hero-overlay);
}

.text-hero-fluid {
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.08;
}

.hero-subtitle-fluid {
    font-size: clamp(0.95rem, 2.2vw, 1.5rem);
    line-height: 1.5;
}

.hero-subtitle {
    color: var(--app-hero-subtitle);
}

.api-main-hero {
    color: #fff;
}

.footer {
    background: var(--app-footer-bg);
    color: var(--app-footer-text);
}

.footer a { color: var(--app-footer-link); }
.footer a:hover { color: var(--app-footer-link-hover); }

.ls-widest {
    letter-spacing: 0.4em;
}

.btn-brand {
    display: inline-block;
    background-color: var(--app-btn-primary-bg);
    color: var(--app-btn-primary-color);
    border: 1px solid var(--app-btn-primary-bg);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--app-btn-primary-hover);
    border-color: var(--app-btn-primary-hover);
    color: var(--app-btn-primary-color);
    text-decoration: none;
}

.btn-outline-brand {
    display: inline-block;
    background-color: transparent;
    color: var(--app-btn-outline-color);
    border: 1px solid var(--app-btn-outline-border);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--app-btn-outline-hover-bg);
    border-color: var(--app-btn-outline-hover-bg);
    color: var(--app-btn-outline-hover-color);
    text-decoration: none;
}