/* chan-tokens.css — site-wide design tokens.
 *
 * Single source of truth for colors, surfaces, and accents. Loaded BEFORE
 * any page-specific stylesheet so pages can use var() throughout. Pages
 * may still override locally for one-off tweaks.
 *
 * Legacy aliases at the bottom keep older pages (--bg2, --brd, etc.)
 * working without a 41-file find-and-replace. New pages should reach
 * for the canonical names.
 */

:root {
    /* Surfaces */
    --bg:           #fefefe;
    --panel:        #faf9f7;
    --panel-hi:     #f6f5f3;          /* nav, table headers */
    --border:       #f0eeea;
    --border-hi:    #e0ddd8;

    /* Text */
    --text-hi:      #222222;
    --text-mid:     #888888;
    --text-lo:      #bbbbbb;

    /* Brand */
    --brand:        #2563eb;
    --brand-hi:     #1d4ed8;          /* hover / pressed */
    --brand-dim:    rgba(37,99,235,0.06);
    --brand-mid:    rgba(37,99,235,0.18);
    --brand-glow:   rgba(37,99,235,0.04);

    /* Accents (used for syntax-coloring + highlights) */
    --accent-violet: #7c3aed;          /* function names, .fn */
    --accent-pink:   #db2777;          /* season tags */
    --success:       #059669;          /* gains, .str */
    --warn:          #f59e0b;          /* RSCI badge */
    --danger:        #dc2626;          /* losses, .kw */
    --gold:          #eab308;          /* draft R1 */
    --silver:        #9ca3af;          /* draft R2 */

    /* Season colors (progression page + others) */
    --c2026: #2563eb;
    --c2025: #f59e0b;
    --c2024: #7c3aed;
    --c2023: #db2777;
    --c2022: #14b8a6;          /* teal — distinct from the other four */

    /* Component overlays */
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg:    0 12px 32px rgba(15,23,42,0.10);
    --overlay:      rgba(0,0,0,0.32);

    /* ── Legacy aliases ── */
    /* These maintain backward compat with pages that used different
     * names for the same concepts. Don't reach for them in new code. */
    --bg2:          var(--panel);
    --bg-out:       var(--panel);
    --brd:          var(--border);
    --brd2:         var(--border-hi);
    --tc:           var(--brand);
    --tc-s:         rgba(37,99,235,0.05);
    --tc-m:         var(--brand-mid);
}