/* ============================================================================
   base/tokens.css  --  design tokens shared by the course kit
   (blocks, algorithms, worked examples, page furniture, figures and the
   viz.js chart helpers). Custom properties only: loading this file changes
   nothing on a page that does not use them.

   Everything is derived from --bs-body-color / --bs-body-bg, which Quarto
   sets for each theme and swaps on the light/dark toggle, so a token that
   mixes them needs no dark-mode rule of its own. Hue tokens (role colors,
   the categorical palette) do have a dark value, set on body.quarto-dark.
   ==========================================================================*/

:root {
    /* ---- surfaces and text ---- */
    --course-ink: var(--bs-body-color, #212529);
    --course-paper: var(--bs-body-bg, #fff);
    --course-muted: color-mix(in srgb, var(--course-ink) 68%, transparent);
    --course-rule: color-mix(in srgb, var(--course-ink) 18%, transparent);
    --course-wash: color-mix(in srgb, var(--course-ink) 4%, var(--course-paper));
    --course-radius: 6px;

    /* ---- role colors: which kind of block a reader is looking at ---- */
    --course-key: #2563eb;
    /* key idea, definition, theorem */
    --course-intuition: #7c3aed;
    /* intuition, why it matters */
    --course-caution: #b45309;
    /* pitfall, misconception */
    --course-practice: #047857;
    /* in practice, worked example, checkpoint */
    --course-algorithm: #0f766e;
    /* algorithm cards */
    --course-history: #78716c;
    /* history, going deeper */
    --course-draft: #c026d3;
    /* author notes, never shown to students */

    /* ---- categorical palette (Okabe & Ito), safe for color-vision deficiency.
       viz.js and any hand-written figure take colors from here, in order. ---- */
    --viz-1: #0072b2;
    /* blue */
    --viz-2: #d55e00;
    /* vermillion */
    --viz-3: #009e73;
    /* bluish green */
    --viz-4: #cc79a7;
    /* reddish purple */
    --viz-5: #e69f00;
    /* orange */
    --viz-6: #56b4e9;
    /* sky blue */
    --viz-7: #f0e442;
    /* yellow */
    --viz-8: #000000;
    /* black */

    /* diverging (negative .. positive) and the single-hue ramp for magnitudes */
    --viz-neg: #0072b2;
    --viz-pos: #d55e00;
    --viz-ramp: #0072b2;

    /* axes, gridlines, labels inside a chart */
    --viz-ink: var(--course-ink);
    --viz-muted: var(--course-muted);
    --viz-grid: color-mix(in srgb, var(--course-ink) 12%, transparent);
    --viz-bg: var(--course-paper);
}

body.quarto-dark {
    --course-key: #7aa2ff;
    --course-intuition: #b79cff;
    --course-caution: #f0a04b;
    --course-practice: #4cc9a0;
    --course-algorithm: #4fd1c5;
    --course-history: #b4aca5;
    --course-draft: #e879f9;

    --viz-1: #56b4e9;
    --viz-2: #f28e4b;
    --viz-3: #2fc99a;
    --viz-4: #e9a3c8;
    --viz-5: #f5b942;
    --viz-6: #8fd0f5;
    --viz-7: #f5ec6a;
    --viz-8: #e5e5e5;
    --viz-neg: #56b4e9;
    --viz-pos: #f28e4b;
    --viz-ramp: #56b4e9;
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, white 50%, black)) {
    :root {
        --course-muted: rgba(33, 37, 41, 0.68);
        --course-rule: rgba(128, 128, 128, 0.3);
        --course-wash: rgba(128, 128, 128, 0.06);
        --viz-grid: rgba(128, 128, 128, 0.25);
    }
}