@import url('./Hero.css');

:root {
    /* === Brand Colors === */
    --lightt-color: #c9a63c;
    --dark-color: #2E2318;
    --activities-loader-bar-color: #99823b;
    --events-loader-bar-color: #785533;
    --header-topper-text-color: #4A3C24;
    --header-text: #3C301E;
    --header-2-text-color: #494747;
    --header-bottom-text: #85733c;
    --staycation-text-color-1: #8c8269;
    --staycation-text-color-2: #c9a63c;

    /* === Typography Scale === */
    --fs-hero-h1: 2.8rem;
    --fs-page-h1: 2.5rem;
    --fs-section-h2: 2.5rem;
    --fs-section-topper: 1.2rem;
    --fs-h3-card: 2rem;
    --fs-lead-p: 1.3rem;
    --fs-body-p: 1rem;
    --fs-btn-text: 0.85rem;
}

/* === Large Laptop Scale (≤ 1460px) === */
@media (max-width: 1460px) {
    :root {
        --fs-hero-h1: 2.4rem;
        --fs-page-h1: 2rem;
        --fs-section-h2: 2rem;
        --fs-h3-card: 1.8rem;
    }
}

/* === Medium Laptop Scale (≤ 1245px) === */
@media (max-width: 1245px) {
    :root {
        --fs-page-h1: 1.8rem;
        --fs-section-h2: 1.8rem;
        --fs-lead-p: 1.2rem;
    }
}

/* === Tablet/Small Laptop Scale (≤ 1100px) === */
@media (max-width: 1100px) {
    :root {
        --fs-page-h1: 1.75rem;
        --fs-section-h2: 1.75rem;
        --fs-section-topper: 1.1rem;
        --fs-h3-card: 1.6rem;
        --fs-lead-p: 1.15rem;
        --fs-body-p: 0.95rem;
    }
}

/* === Mobile Typography Scale (≤ 480px) === */
@media (max-width: 480px) {
    :root {
        --fs-hero-h1: 1.8rem;
        --fs-page-h1: 1.5rem;
        /* Reduced to prevent overflow */
        --fs-section-h2: 1.5rem;
        --fs-section-topper: 0.95rem;
        --fs-h3-card: 1.4rem;
        --fs-lead-p: 1.05rem;
        --fs-body-p: 0.9rem;
        --fs-btn-text: 0.78rem;
    }
}