/* ============================================================
   Location Spoke — Base: Design Tokens & Shared Utilities
   File: assets/css/spoke/spoke-base.css
   Scope: :root tokens + globally-shared classes used by every
   spoke section (.spoke-btn*, .spoke-eyebrow, section helpers).
   Reusable across cities (Denver, Colorado Springs, Boulder, ...).
   ============================================================ */

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

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

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

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

    /* Spacing */
    --spoke-section-pad: 96px;
    --spoke-gap-cards:   24px;
}


/* ============================
   BOX MODEL + SECTION HELPERS
   ============================ */

[class^="spoke-"],
[class^="spoke-"] * {
    box-sizing: border-box;
}

.spoke-section {
    padding: var(--spoke-section-pad) 0;
}

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

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

.spoke-white-section {
    background: var(--spoke-white);
    color: var(--spoke-navy);
}


/* ============================
   SHARED HEADINGS + EYEBROW
   ============================ */

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

.spoke-h2 {
    font-family: var(--spoke-font-serif);
    font-size: 44px;
    line-height: 1.14;
    font-weight: 400;
    margin: 0 0 20px;
}

.spoke-intro {
    font-family: var(--spoke-font-sans);
    font-size: 19px;
    line-height: 1.6;
    color: var(--spoke-grey-dark);
    margin: 0 0 40px;
}

.spoke-navy-section .spoke-intro {
    color: var(--spoke-stat-label);
}


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

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

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

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

.spoke-btn--gold {
    background: var(--spoke-gold);
    color: var(--spoke-navy);
}

.spoke-btn--gold:hover {
    opacity: 0.9;
    color: var(--spoke-navy);
    text-decoration: none;
}

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

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


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

@media (max-width: 1024px) {
    :root { --spoke-section-pad: 72px; }
    .spoke-h2 { font-size: 36px; }
}

@media (max-width: 768px) {
    :root { --spoke-section-pad: 56px; }
    .spoke-h2 { font-size: 29px; }
    .spoke-intro { font-size: 17px; }
    .spoke-btn { padding: 13px 26px; font-size: 17px; }
}