/* ============================================================================
   athlete/css/shared.css — single source of truth for the parent app's design
   tokens. Every athlete page imports this BEFORE its page-specific CSS so the
   tokens are available everywhere and a page-specific :root can still override
   any individual token cleanly via the cascade.

   What lives here:
     - :root tokens (colors, surfaces, typography weights, radii, shadows)
     - Universal box-sizing reset
     - --team-* defaults (overridden at runtime by athlete-switcher.js once the
       active team is known)

   What does NOT live here:
     - Page-specific layout (lives in /athlete/css/{page}.css)
     - Dark-mode token flips (lives in /athlete/css/dark.css for now; will be
       merged into this file once dark-mode unification PR ships)
     - Component-specific styles (bottom-nav, athlete-switcher, etc. — each
       owns its own block in the page CSS or its module's injected style)

   Why this exists: prior to extraction, every athlete page redeclared :root
   inline. Drift snuck in over time (#525252 vs var(--ink-muted), shadow
   variants, different --nav-h values). One token file kills that class of bug.

   Cascade contract:  shared.css → dark.css → page.css → module-injected CSS
   ========================================================================== */

:root {
    /* Surface — light theme baseline. Pure white surfaces, near-black ink. */
    --bg:                #fafafa;
    --surface:           #ffffff;
    --surface-elevated:  #ffffff;

    /* Ink — text color scale, dark to muted to faint. */
    --ink:               #0a0a0a;
    --ink-muted:         #525252;
    --ink-faint:         #a3a3a3;

    /* Borders — subtle hairlines, no harsh dividers. */
    --border:            #ececec;
    --border-strong:     #d4d4d4;

    /* Accent — Sideline Command green, used sparingly. */
    --accent:            #22c55e;
    --accent-soft:       #dcfce7;

    /* Live state — red for in-progress games. */
    --live:              #ef4444;
    --live-soft:         #fee2e2;

    /* Shadows — paired pair for the SM/MD elevation steps. */
    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:         0 4px 18px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);

    /* Radii — match the design system's rounded-rectangle language. */
    --radius:            14px;
    --radius-sm:         10px;

    /* Bottom nav height (the nav.js module + page CSS both need this). */
    --nav-h:             92px;

    /* Team identity — placeholders. athlete-switcher.js overrides these on
       the document root when the active team changes, which cascades into
       every team-tinted accent across the app (header gradient bar, jersey
       pills, dropdown chrome, etc.). */
    --team-primary:      #1d4ed8;
    --team-secondary:    #f59e0b;
    --team-primary-soft: rgba(29, 78, 216, 0.08);
}

/* Universal reset — was duplicated across every page CSS. One source of
   truth, applies before any page-specific styles run. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================================================
 * ACCESSIBILITY — A+ marathon (2026-05-23 audit)
 * ----------------------------------------------------------------------------
 * (1) Global :focus-visible ring. Audit found ONE :focus-visible rule across
 *     the whole athlete surface; every icon-only button explicitly removed
 *     outline with no replacement → keyboard users had no focus indicator.
 * (2) prefers-reduced-motion respected universally for vestibular-disorder users.
 * ============================================================================ */
*:focus-visible {
    outline: 2px solid var(--team-primary, #1d4ed8);
    outline-offset: 2px;
    border-radius: 4px;
}
[role="button"]:focus-visible,
.composer-attach:focus-visible,
.composer-send:focus-visible,
.th-back:focus-visible,
.gh-back:focus-visible,
.header-icon-btn:focus-visible,
.filter-pill:focus-visible,
.ss-btn:focus-visible,
.bn-item:focus-visible,
.new-msg-btn:focus-visible,
.profile-edit:focus-visible {
    outline: 2px solid var(--team-primary, #1d4ed8);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* FOUC defense — inline SVGs without an explicit `width` HTML attribute
 * default to 300×150 in every browser. Until component CSS applies the
 * intended size, the icon briefly paints as a huge 300×150 block. Carlos
 * May 23 2026 night: "Click my players → avatar full screen flash. Click
 * messages → magnifying glass huge for a beat."
 *
 * This rule constrains ANY <svg viewBox=...> without an explicit width
 * attribute to 1em — small, inherits font-size, visually identical to
 * what component CSS will set a few ms later. Component CSS with higher
 * specificity still wins (e.g. .bn-item svg { width: 26px } overrides).
 *
 * Scoped to athlete/* pages via shared.css inclusion order; doesn't
 * leak to scoreboard / referee / coach which include their own shared
 * stylesheets. */
svg[viewBox]:not([width]) {
    width: 1em;
    height: 1em;
}

/* iPad/WebKit guard (May 29 2026 touch audit): an <svg> flex-item collapses to 0px
 * WIDTH inside a flex button (flex-shrink overrides the explicit width), so an
 * icon next to a text label can squeeze toward nothing on a narrow iPhone and
 * vanish. Global rule so every icon button is safe — covers .btn svg /
 * .new-msg-btn svg / .action-btn svg etc. Same fix shipped to coach + platform. */
button svg,
button i[data-lucide],
.btn svg {
    flex-shrink: 0;
}

/* Touch-target bumps — audit found .header-icon-btn (38×38), .th-back (38×38),
 * .filter-pill (~38px tall), .new-msg-btn (~35px tall) under the 44pt Apple
 * HIG target. Bump them globally; individual page CSS can still override
 * for desktop-density layouts. */
.header-icon-btn,
.th-back,
.th-action,
.gh-back {
    min-width: 44px;
    min-height: 44px;
}
.filter-pill,
.new-msg-btn {
    min-height: 44px;
}