/*
|--------------------------------------------------------------------------
| Design Tokens & Shared Utilities
|--------------------------------------------------------------------------
|
| Shared foundation for the site's `.yo-*` design system, used by every
| "redesigned" template (award.php, segment.php, home.php, category.php,
| static.php). Was previously duplicated verbatim inline in all 5 of
| those files (~10 KB of exact duplicate CSS across the site); loaded
| once here instead via each page's own $pageStylesMap entry in
| includes/layouts/header.php.
|
| Three of the utility classes below (.yo-badge-light, .yo-btn-navy,
| .yo-quick-link*) had tiny, unintentional divergences between pages
| before this consolidation (a missing border, a missing
| text-decoration, a missing white-space/slower transition on one or
| two pages) — reconciled here to the more complete version so all
| pages render identically. See the deploy notes for the exact diff.
|
| Everything else that was page-specific (hero sections, tables,
| accordions, page-only components) stays in that page's own
| {page}.css file, still scoped under its own .yo-{page} wrapper class
| exactly as before.
|--------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,600;0,8..60,700;0,8..60,800&display=swap');

/*
 * Global custom properties — identical values across every page that
 * used to redeclare them per .yo-{page} wrapper; --yo-navy-surface and
 * --yo-border-strong were previously home.php-only, promoted here
 * since a bare custom-property declaration costs nothing on a page
 * that doesn't reference it.
 */
:root {
    --yo-navy-dark: #0F172A;
    --yo-navy-surface: #1E293B;
    --yo-gold: #D97706;
    --yo-gold-light: #FEF3C7;
    --yo-amber: #F59E0B;
    --yo-bronze: #EA580C;
    --yo-bg-subtle: #F1F5F9;
    --yo-border-subtle: #E2E8F0;
    --yo-border-strong: #CBD5E1;
    --yo-text-primary: #0F172A;
    --yo-text-muted: #64748B;
}

.yo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--yo-gold);
}

.yo-eyebrow-line {
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background: var(--yo-bronze);
    display: inline-block;
}

.yo-headline {
    color: var(--yo-navy-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.yo-muted {
    color: var(--yo-text-muted);
}

.yo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.yo-badge-light {
    background: rgba(255, 255, 255, .92);
    color: var(--yo-text-muted);
    border: 1px solid var(--yo-border-subtle);
}

.yo-badge-gold {
    background: var(--yo-gold-light);
    color: var(--yo-gold);
}

.yo-btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #f75815;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.yo-btn-navy:hover {
    background: #d9490c;
    color: #fff;
}

.yo-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--yo-border-subtle);
    border-radius: 1.25rem;
    transition: box-shadow .2s, border-color .2s;
}

.yo-card:hover {
    border-color: var(--yo-gold);
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .2);
}

/*
 * Only rendered on award.php, segment.php and static.php today (home
 * and category build their quick-links row with .yo-chip instead) —
 * kept here anyway since it's genuinely shared across 3 pages and the
 * extra bytes on the other 2 are negligible.
 */
.yo-quick-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--yo-border-subtle);
    background: #fff;
    color: var(--yo-text-primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}

.yo-quick-link:hover {
    border-color: var(--yo-gold);
    color: var(--yo-gold);
    background: var(--yo-gold-light);
}

.yo-quick-link i {
    color: var(--yo-gold);
}