/* ============================================================
   Location Hub — Base: Design Tokens & Shared Utilities
   File: assets/css/hub/hub-base.css
   Scope: :root tokens + globally-shared classes used by every
   hub section (.hub-btn*, .hub-eyebrow, section rhythm helpers).
   Reusable across states (Colorado, Texas, New York, ...).
   ============================================================ */

/* ============================
   DESIGN TOKENS
   ============================ */

:root {
    /* Colors */
    --hub-navy:        #03002F;
    --hub-blue:         #4768DA;
    --hub-cream:        #F5F0EC;
    --hub-white:        #FFFFFF;
    --hub-grey:         #7A7886;
    --hub-grey-2:       #7B7984;
    --hub-grey-dark:    #4D4B57;
    --hub-stat-label:   #E1D5CF;
    --hub-border:       #C2C2C2;

    /* Typography */
    --hub-font-serif:   'Hedvig Letters Serif', serif;
    --hub-font-sans:    'DM Sans', sans-serif;

    /* Radius */
    --hub-radius-card:  25px;
    --hub-radius-pill:  30px;
    --hub-radius-btn:   10px;
    --hub-radius-img:   15px;

    /* Spacing */
    --hub-section-pad:  100px;
    --hub-gap-cards:    24px;
}


/* ============================
   SECTION RHYTHM
   ============================ */

[class^="hub-"] {
    box-sizing: border-box;
}

.hub-navy-section {
    background: var(--hub-navy);
    color: var(--hub-cream);
}

.hub-cream-section {
    background: var(--hub-cream);
    color: var(--hub-navy);
}


/* ============================
   SHARED EYEBROW LABEL
   ============================ */

.hub-eyebrow {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0112em;
    color: var(--hub-blue);
    margin: 0 0 16px;
    display: inline-block;
}


/* ============================
   SHARED CTA BUTTONS
   ============================ */

.hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hub-font-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    padding: 16px 40px;
    border-radius: var(--hub-radius-btn);
    text-decoration: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.hub-btn--primary {
    background: var(--hub-blue);
    color: var(--hub-white);
}

.hub-btn--primary:hover {
    opacity: 0.88;
    color: var(--hub-white);
    text-decoration: none;
}

.hub-btn--outline {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.hub-btn--outline:hover {
    opacity: 0.75;
    text-decoration: none;
    color: inherit;
}


/* ============================
   RESPONSIVE — BASE
   ============================ */

@media (max-width: 768px) {
    .hub-btn {
        padding: 13px 28px;
        font-size: 17px;
    }
}