/* chan-tokens.css — site-wide design tokens.
 *
 * Architecture (Atlassian-inspired mirror-mapping):
 *
 *   1. RAW PALETTE  — numbered gray scale + named hue scales.
 *      Never reference these directly in component code.
 *
 *   2. SEMANTIC TOKENS  — map raw values to roles (--bg, --border-hi, etc.).
 *      This is what components use.
 *
 *   3. DARK MODE  — each semantic token is remapped via mirror-mapping:
 *      gray-50 (light bg panel) ↔ gray-1100 (dark bg panel).
 *      Saturated colors: if N in light, use ~(1000-N) in dark.
 *
 * To add a color: add it to the raw palette section, then reference it
 * in semantic tokens. Never hardcode raw hex values in component CSS.
 */

:root {
    /* ─── Raw gray scale — warm, slightly papery ───────────────────────── */
    --gray-0:    #fefefe;
    --gray-50:   #faf9f7;
    --gray-100:  #f6f5f3;
    --gray-200:  #eceae6;
    --gray-300:  #e0ddd8;
    --gray-400:  #c8c5bf;
    --gray-500:  #a09892;
    --gray-600:  #888076;
    --gray-700:  #5a534a;
    --gray-800:  #3c3830;
    --gray-900:  #2e2a24;
    --gray-1000: #242119;
    --gray-1100: #1c1a16;
    --gray-1200: #141310;

    /* ─── Raw blue scale ────────────────────────────────────────────────── */
    --blue-300:  #93b8fd;
    --blue-400:  #6fa0f9;
    --blue-500:  #4f88f5;
    --blue-600:  #2563eb;
    --blue-700:  #1d4ed8;

    /* ─── Raw teal scale ────────────────────────────────────────────────── */
    --teal-300:  #5eead4;
    --teal-400:  #2dd4bf;
    --teal-500:  #14b8a6;
    --teal-600:  #0d9488;
    --teal-700:  #0f766e;

    /* ─── Raw green scale ───────────────────────────────────────────────── */
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    /* ─── Raw purple scale ──────────────────────────────────────────────── */
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;

    /* ─── Semantic tokens — light mode (default) ────────────────────────── */

    /* Surfaces */
    --bg:           var(--gray-0);
    --panel:        var(--gray-50);
    --panel-hi:     var(--gray-100);    /* nav, table headers */
    --border:       var(--gray-200);
    --border-hi:    var(--gray-300);

    /* Text */
    --text-hi:      #222222;
    --text-mid:     var(--gray-600);
    --text-lo:      var(--gray-400);

    /* Brand */
    --brand:        var(--blue-600);
    --brand-hi:     var(--blue-700);    /* 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 */
    --accent-violet: #7c3aed;
    --accent-pink:   #db2777;
    --success:       #059669;
    --warn:          #f59e0b;
    --danger:        #dc2626;
    --gold:          #eab308;
    --silver:        #9ca3af;

    /* Panel accents — teal / green / purple */
    --teal:          var(--teal-600);
    --teal-dim:      rgba(13,148,136,0.08);
    --green:         var(--green-600);
    --green-dim:     rgba(22,163,74,0.08);
    --purple:        var(--purple-600);
    --purple-dim:    rgba(147,51,234,0.08);

    /* Season colors */
    --c2026: #2563eb;
    --c2025: #f59e0b;
    --c2024: #7c3aed;
    --c2023: #db2777;
    --c2022: #14b8a6;
    --c2021: #6366f1;
    --c2020: #16a34a;

    /* Shadows / 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 ── */
    --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);
}


/* ─── Dark mode ─────────────────────────────────────────────────────────── *
 *
 * Mirror mapping: gray-50 (light panel) → gray-1100 (dark panel), etc.
 * Brand: blue-600 (light) → blue-500 (dark) — brighter for contrast.
 * Accents: shift ~2 steps lighter on each hue scale.
 *
 * Applied via:
 *   a) @media (prefers-color-scheme: dark) — system preference
 *   b) [data-theme="dark"] on <html> — user explicit toggle (beats system)
 *   c) [data-theme="light"] on <html> — user explicit light override
 */

/* Shared dark token block — used by both selectors below */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:           var(--gray-1200);   /* 0 → 1200 */
        --panel:        var(--gray-1100);   /* 50 → 1100 */
        --panel-hi:     var(--gray-1000);   /* 100 → 1000 */
        --border:       var(--gray-900);    /* 200 → 900 */
        --border-hi:    var(--gray-800);    /* 300 → 800 */

        --text-hi:      #ede8e3;            /* warm near-white */
        --text-mid:     #8c867e;            /* warm medium */
        --text-lo:      var(--gray-700);    /* muted */

        --brand:        var(--blue-500);    /* 600 → 500 */
        --brand-hi:     var(--blue-400);    /* 700 → 400 */
        --brand-dim:    rgba(79,136,245,0.12);
        --brand-mid:    rgba(79,136,245,0.26);
        --brand-glow:   rgba(79,136,245,0.07);

        --accent-violet: #a78bfa;
        --accent-pink:   #f472b6;
        --success:       #34d399;
        --warn:          #fbbf24;
        --danger:        #f87171;
        --gold:          #facc15;
        --silver:        #d1d5db;

        --teal:          var(--teal-400);
        --teal-dim:      rgba(45,212,191,0.12);
        --green:         var(--green-400);
        --green-dim:     rgba(74,222,128,0.12);
        --purple:        var(--purple-400);
        --purple-dim:    rgba(192,132,252,0.12);

        --shadow-sm:    0 1px 2px rgba(0,0,0,0.28);
        --shadow-md:    0 4px 16px rgba(0,0,0,0.44);
        --shadow-lg:    0 12px 32px rgba(0,0,0,0.60);
        --overlay:      rgba(0,0,0,0.60);

        /* Legacy aliases — keep them pointing to the same semantic values */
        --tc-s:         rgba(79,136,245,0.08);
    }
}

[data-theme="dark"] {
    --bg:           var(--gray-1200);
    --panel:        var(--gray-1100);
    --panel-hi:     var(--gray-1000);
    --border:       var(--gray-900);
    --border-hi:    var(--gray-800);

    --text-hi:      #ede8e3;
    --text-mid:     #8c867e;
    --text-lo:      var(--gray-700);

    --brand:        var(--blue-500);
    --brand-hi:     var(--blue-400);
    --brand-dim:    rgba(79,136,245,0.12);
    --brand-mid:    rgba(79,136,245,0.26);
    --brand-glow:   rgba(79,136,245,0.07);

    --accent-violet: #a78bfa;
    --accent-pink:   #f472b6;
    --success:       #34d399;
    --warn:          #fbbf24;
    --danger:        #f87171;
    --gold:          #facc15;
    --silver:        #d1d5db;

    --teal:          var(--teal-400);
    --teal-dim:      rgba(45,212,191,0.12);
    --green:         var(--green-400);
    --green-dim:     rgba(74,222,128,0.12);
    --purple:        var(--purple-400);
    --purple-dim:    rgba(192,132,252,0.12);

    --shadow-sm:    0 1px 2px rgba(0,0,0,0.28);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.44);
    --shadow-lg:    0 12px 32px rgba(0,0,0,0.60);
    --overlay:      rgba(0,0,0,0.60);

    --tc-s:         rgba(79,136,245,0.08);
}

/* Explicit light — beats system dark preference */
[data-theme="light"] {
    --bg:           var(--gray-0);
    --panel:        var(--gray-50);
    --panel-hi:     var(--gray-100);
    --border:       var(--gray-200);
    --border-hi:    var(--gray-300);

    --text-hi:      #222222;
    --text-mid:     var(--gray-600);
    --text-lo:      var(--gray-400);

    --brand:        var(--blue-600);
    --brand-hi:     var(--blue-700);
    --brand-dim:    rgba(37,99,235,0.06);
    --brand-mid:    rgba(37,99,235,0.18);
    --brand-glow:   rgba(37,99,235,0.04);

    --accent-violet: #7c3aed;
    --accent-pink:   #db2777;
    --success:       #059669;
    --warn:          #f59e0b;
    --danger:        #dc2626;
    --gold:          #eab308;
    --silver:        #9ca3af;

    --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);

    --tc-s:         rgba(37,99,235,0.05);
}