/* ============================================================================
 * contrast.css — legibility corrections for the predsfan palette.
 *
 * Why this file exists
 * --------------------
 * Navy #041E42 and gold #FFB81C are a strong pair against EACH OTHER (9.6:1),
 * which is why the header, footer and buttons have always looked right. The
 * failures are all cases where one of them meets a ground it was never checked
 * against:
 *
 *   - navy text on the navy page-header field  -> 1:1, the title is INVISIBLE
 *     (Roster, Statistics, Latest News, Video Highlights all render blank)
 *   - gold text on a white/near-white card     -> 1.64–1.73:1
 *   - slate small print on the navy footer     -> 1.83–2.16:1
 *   - muted greys chosen for body text         -> 2.02–4.45:1
 *
 * The gold-on-white family is worth naming, because it is the mirror image of
 * the bug found on rangersfan.net: there a DARK secondary died on the dark
 * brand field; here a LIGHT secondary dies on light surfaces. Same fault seen
 * from the other side — an accent is only ever legible on one kind of ground,
 * so a palette needs a role for each.
 *
 * Roles
 * -----
 * predsfan is a single-team build with no theme generator, so these are static
 * and the arithmetic is recorded beside them rather than computed. Ratios are
 * WCAG relative luminance, verified with contrast-audit after deploying.
 *
 * Load order
 * ----------
 * Linked LAST in every view, after blog.css / players.css / stats.css and the
 * rest, which set colour after bundle-core.css. Anywhere earlier and it loses.
 * ========================================================================== */

:root {
    --on-primary:        #ffffff;   /* on #041E42 — 16.5:1 */
    --on-secondary:      #041E42;   /* on #FFB81C —  9.6:1 (white would be 1.7) */
    --accent-on-primary: #FFB81C;   /* gold on navy — 9.6:1, already correct    */

    /* The gold that survives a light surface. Full-strength gold is 1.73:1 on
     * white; this is the same hue carried down until it clears AA (5.1:1). */
    --accent-on-surface: #8B6914;

    /* Supporting text on the navy field. Must clear AA on the LIGHTEST stop of
     * the navy gradients too (#194A7E), not just flat #041E42 — the stat strip
     * fades to that and is where the old #5d6f86 measured 1.76:1.
     * 11.0:1 on #041E42, 6.0:1 on #194A7E. */
    --muted-on-primary:  #c8d4e4;
}

/* ── titles on the brand field ───────────────────────────────────────────────
 * bundle-core sets `h1…h6 { color: var(--brand-navy-900) }`, which is right on
 * white and catastrophic on a navy page header. All four *-page-header blocks
 * paint the navy field, so the suffix selector is safe and picks up any future
 * page for free. */
[class$="-page-header"] h1,
[class$="-page-header"] h2,
.page-header h1 {
    color: var(--on-primary);
}

/* fan-guide.css styles these `color: white` but never sets a background, so they
 * inherited the light `thead th` fill and rendered white-on-#f4f6f8 (1.08:1). */
.data-table thead th {
    background-color: var(--brand-navy-900, #041E42);
    color: var(--on-primary);
}

/* ── the gold-on-light family ────────────────────────────────────────────────
 * Every one of these is full-strength gold on a white or near-white card. */
.read-more-link,
.player-card .player-number,
.lineup-player .lineup-number,
.bottom-nav-link.active .nav-label,
.blog-card-footer a {
    color: var(--accent-on-surface);
}

/* ── supporting text on the navy field ───────────────────────────────────── */
.site-footer small,
.site-footer .footer-text,
.site-footer .footer-bottom p,
.quick-stats-bar .label,
.quick-stat .label,
.hero-card .hero-card-meta {
    color: var(--muted-on-primary);
}

.quick-stats-bar .value,
.quick-stat .value {
    color: var(--on-primary);
}

/* ── muted text on light surfaces ────────────────────────────────────────────
 * Ramp steps 400/500 and the two loose greys are legitimate border colours; they
 * were being used for body-adjacent text at 2.0–4.5:1. Step 600 (#5d6f86) is
 * 5.1:1 on white; step 700 (#445566) is 7.2:1 and covers the tinted cards. */
.blog-card-reading-time,
.blog-card-meta time,
.popular-post-views,
.view-count,
.video-date,
.side-story .story-meta,
.mini-position,
.player-number-inline,
.sit-label,
.country-more,
.pagination-info,
.goal-time,
.broadcast {
    color: var(--neutral-600, #5d6f86);
}

/* These sit on tinted chrome (#edeef0, #f1f1f1, #f3f4f6, #f8f9fa) where step 600
 * lands at 4.2–4.5:1 — under or on the line. Step 700 clears it everywhere. */
.search-icon,
.player-search-wrapper .search-icon,
.view-toggle .view-toggle-btn,
.view-toggle .view-toggle-btn span,
.mobile-stats-toggle .toggle-btn,
.leader-stat-label,
.mobile-position-count,
.filter-count,
.perf-rank,
.stat-label,
.player-stat-card .stat-label {
    color: var(--neutral-700, #445566);
}

/* ── status colours ──────────────────────────────────────────────────────────
 * #10b981 is 2.5:1 on white as text; #ef4444 is 3.8:1 both as text AND behind
 * white text, so it failed in both roles. Steps that clear 4.5:1 either way. */
.schedule-game-time span,
.home-indicator,
.context-diff.positive,
.stat-change.positive,
.trend-up {
    color: var(--success-700, #047857);
}

.perf-value.negative,
.stat-change.negative,
.trend-down {
    color: #dc2626;
}

.streak-badge.loss,
.badge-danger {
    background-color: #dc2626;
    color: #ffffff;
}

.streak-badge.win,
.badge-success {
    background-color: var(--success-700, #047857);
    color: #ffffff;
}

/* ── round 2: cases the first pass missed, each for a specific reason ──────── */

/* bundle-core defines this token as "inactive / placeholder text" — a text-only
 * token at 2.5:1 on white. Darkened at the token so every consumer follows;
 * the ramp steps stay untouched because they are also border colours. */
:root {
    --neutral-gray-400: #5d6f86;   /* was #9ca3af */
}

/* `.video-card .video-date` in bundle-core is (0,2,0) and outranked the bare
 * `.video-date` used above, so the carousel kept its 3.31:1 date. */
.video-card .video-date,
.video-meta .video-date,
.video-info .video-date {
    color: var(--neutral-600, #5d6f86);
}

/* The blog header's `small` sits on the navy gradient, where bundle-core's
 * `small { color: var(--neutral-700) }` is 1.83:1. Same field as the footer. */
[class$="-page-header"] small,
[class$="-page-header"] .ai-notice,
[class$="-page-header"] p {
    color: var(--muted-on-primary);
}

/* Self-inflicted: the previous block set every .view-toggle-btn span to slate,
 * including the ACTIVE one, which sits on a gold fill — 4.43:1. The active
 * button already paints navy-on-gold; its span must follow, not diverge. */
.view-toggle .view-toggle-btn.active,
.view-toggle .view-toggle-btn.active span,
button.view-toggle-btn.active span {
    color: var(--on-secondary);
}

/* ── round 3 ─────────────────────────────────────────────────────────────── */

/* blog.css sets this from the 500 step; 3.31:1 on the white sidebar card. */
.recap-date,
.recent-recap-item .recap-date {
    color: var(--neutral-600, #5d6f86);
}

/* The live page's loss states use #ef4444, which is 3.76:1 as text on white AND
 * 3.76:1 behind white text — short of AA in both directions, the same way the
 * schedule strip was. #dc2626 clears it either way. */
.game-status-badge.loss,
.game-status-badge.final.loss {
    background-color: #dc2626;
}
.game-status-badge.loss .status-text,
.game-status-badge.final.loss .status-text {
    color: #ffffff;
}
.final-stat-row .value.loss,
.final-summary .final-stat-row span.value {
    color: #dc2626;
}

/* ── round 4: fix the win/loss pair at the token ──────────────────────────────
 * live.css and schedule.css alias --win-green/--loss-red to the 500 steps
 * (#10b981 / #ef4444), which are 2.5:1 and 3.8:1 on white. live.js writes the
 * loss colour as an INLINE style — but it writes `var(--loss-red)`, so
 * redefining the token here reaches even the inline case, which a selector
 * could not. Both replacements clear AA as text on white and behind white text,
 * so they stay correct in the fill role schedule.css uses them for. */
:root {
    --win-green: #047857;   /* was #10b981 — 2.5:1 on white */
    --loss-red:  #dc2626;   /* was #ef4444 — 3.8:1 both directions */
}