@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

/* =============================================
CUSTOM VARIABLES & FONTS
============================================= */
:root {
    --navy: #101c2b;
    --brown: #391e1b;
    --olive: #676130;
    --tan: #bf9460;
    --cream: #f2e6d8;
}

body {
    font-family: 'Lora', serif; /* All body text, paragraphs, etc. */
}

/* GELATO LUXE – Headers (h1, h2, h3, nav logo, etc.) */
.heading-font {
    font-family: 'Gelato Luxe', 'Dancing Script', cursive;
    /* 
    → For the REAL Adobe Gelato Luxe:
        1. Go to Adobe Fonts → add Gelato Luxe to a web project
        2. Copy the <link> or @import code from Adobe and paste above
        OR
        3. Download the font files (WOFF2) and add @font-face rules below
    → Dancing Script is the closest free match for instant preview
    */
    font-weight: 400;
}

/* Script style used for smaller accents (kept for consistency) */
.script-font {
    font-family: 'Gelato Luxe', 'Dancing Script', cursive;
}

/* HERO BACKGROUND */
.hero-bg {
    background: linear-gradient(to bottom, rgba(242,230,216,0.95), rgba(242,230,216,0.8)), 
    url('img/coatofarms_transparent.svg') center/cover no-repeat;
}