/*
 * variables.css — theme-wide configurable mappings
 *
 * The intent of this file is "edit me, then everything updates".
 *
 * ─────────────────────────────────────────────────────────────────────
 * TAG COLORS
 *
 * Each tag has TWO variables:
 *   --tag-{slug}-color  →  the saturated text/fill color
 *   --tag-{slug}-base   →  the mid-saturation base used for chip
 *                          backgrounds and borders (via color-mix tints)
 *
 * To add a new tag color:
 *   1. Add the two variables under :root:
 *        --tag-mytag-color: var(--lime-hi);
 *        --tag-mytag-base:  var(--lime);
 *   2. Add a single matching selector under @layer pages:
 *        [data-tag-slug="mytag"] {
 *            color: var(--tag-mytag-color);
 *            --tag-base: var(--tag-mytag-base);
 *        }
 *
 * Anything in the theme rendered with [data-tag-slug="mytag"] will
 * pick up the text color, and any .chip / .chip-v / .chip-l with the
 * same attribute will tint its background and border to match.
 *
 * Built-in palette tokens you can reference:
 *   var(--violet)     var(--violet-hi)    — the default
 *   var(--lime)       var(--lime-hi)
 *   var(--danger)     var(--danger-hi)    — "rabbit" red
 *   var(--ink-0)      var(--ink-2)        — neutrals
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
    /* Fallback used by [data-tag-slug] elements with no explicit mapping. */
    --tag-default-color: var(--violet-hi);
    --tag-default-base:  var(--violet);

    /* Danger / "rabbit" family — deep dives, archival oddities. */
    --tag-rabbit-hole-color: var(--danger-hi);
    --tag-rabbit-hole-base:  var(--danger);
    --tag-archive-color:     var(--danger-hi);
    --tag-archive-base:      var(--danger);
    --tag-telemetry-color:   var(--danger-hi);
    --tag-telemetry-base:    var(--danger);
    --tag-minitel-color:     var(--danger-hi);
    --tag-minitel-base:      var(--danger);

    /* Lime family — gamedev, focus tools, side-projects, nature. */
    --tag-gamedev-color:     var(--lime-hi);
    --tag-gamedev-base:      var(--lime);
    --tag-postmortem-color:  var(--lime-hi);
    --tag-postmortem-base:   var(--lime);
    --tag-adhd-color:        var(--lime-hi);
    --tag-adhd-base:         var(--lime);
    --tag-tdah-color:        var(--lime-hi);
    --tag-tdah-base:         var(--lime);
    --tag-factorio-color:    var(--lime-hi);
    --tag-factorio-base:     var(--lime);
    --tag-pomodoro-color:    var(--lime-hi);
    --tag-pomodoro-base:     var(--lime);
    --tag-birds-color:       var(--lime-hi);
    --tag-birds-base:        var(--lime);
    --tag-macos-color:       var(--lime-hi);
    --tag-macos-base:        var(--lime);
}

@layer pages {
    /* Default for any element carrying [data-tag-slug]. The --tag-base
       custom property propagates down so chip-style children can use it. */
    [data-tag-slug] {
        color: var(--tag-default-color);
        --tag-base: var(--tag-default-base);
    }

    /* Per-tag overrides — adjust both color and the base hue. */
    [data-tag-slug="rabbit-hole"] { color: var(--tag-rabbit-hole-color); --tag-base: var(--tag-rabbit-hole-base); }
    [data-tag-slug="archive"]     { color: var(--tag-archive-color);     --tag-base: var(--tag-archive-base); }
    [data-tag-slug="telemetry"]   { color: var(--tag-telemetry-color);   --tag-base: var(--tag-telemetry-base); }
    [data-tag-slug="minitel"]     { color: var(--tag-minitel-color);     --tag-base: var(--tag-minitel-base); }

    [data-tag-slug="gamedev"]     { color: var(--tag-gamedev-color);     --tag-base: var(--tag-gamedev-base); }
    [data-tag-slug="postmortem"]  { color: var(--tag-postmortem-color);  --tag-base: var(--tag-postmortem-base); }
    [data-tag-slug="adhd"]        { color: var(--tag-adhd-color);        --tag-base: var(--tag-adhd-base); }
    [data-tag-slug="tdah"]        { color: var(--tag-tdah-color);        --tag-base: var(--tag-tdah-base); }
    [data-tag-slug="factorio"]    { color: var(--tag-factorio-color);    --tag-base: var(--tag-factorio-base); }
    [data-tag-slug="pomodoro"]    { color: var(--tag-pomodoro-color);    --tag-base: var(--tag-pomodoro-base); }
    [data-tag-slug="birds"]       { color: var(--tag-birds-color);       --tag-base: var(--tag-birds-base); }
    [data-tag-slug="macos"]       { color: var(--tag-macos-color);       --tag-base: var(--tag-macos-base); }

    /* Chip-styled elements pick up tinted backgrounds/borders from --tag-base.
       Higher specificity than tokens.css's .chip / .chip-v / .chip-l rules
       so these win wherever a [data-tag-slug] is set. */
    .chip[data-tag-slug],
    .chip-v[data-tag-slug],
    .chip-l[data-tag-slug],
    .chip-r[data-tag-slug],
    .chip-lime[data-tag-slug],
    .chip-rabbit[data-tag-slug] {
        background: color-mix(in oklab, var(--tag-base) 14%, transparent);
        border-color: color-mix(in oklab, var(--tag-base) 32%, transparent);
    }
}