/* ══════════════════════════════════════════════════════════════════════════
   The Lini book's clothes over the RamJet theme.

   RamJet is a two-colour theme with two jobs: its ACCENT is the book's own
   system — links, code, tables, search chrome, the NOTE alert, the start of
   every gradient — and its SECONDARY marks where the reader is — the active
   chapter, the active heading, the selection, the search hits, the IMPORTANT
   alert. It ships as teal and ember; this file gives both jobs to the site's
   own pair, so a reader crossing from lini.rs into the book stays on one
   palette.

   Which colour takes which job follows DESIGN.md's rule, not taste:

     - VIOLET (hue 250, the site's accent) takes RamJet's accent. The site gives
       every interface state to violet — hovers, the pager, `run`, the live
       chip — and the book's links, code chips, table heads and hairlines are
       exactly that: the interface.

     - WATERMELON (hue 350, the brand) takes RamJet's secondary. Brand is
       identity, and identity is allowed exactly one interface job on the
       site: the ACTIVE state — the pager's active pill, the pressed toggle.
       RamJet's secondary is that job by another name: the chapter you are
       in, the heading you are at, the text you selected. A small dose, on
       what the eye is already hunting for.

     One departure from RamJet: its header-icon hover is the secondary's, and
     the site's rule is that every hover is the accent's. The book follows
     the site, so hovers go violet here.

   Every tier is anchored to a token in `web/site.css` rather than re-derived:
   accent-400 IS --color-accent, accent-600 IS -deep (the text tier, 4.60:1
   on the ground), secondary-500 IS --color-brand, secondary-700 IS
   --color-brand-deep. The in-between steps interpolate, and the saturation
   falls as the lightness does — DESIGN.md's finding that chroma rises as a
   colour darkens at a fixed S, so a ramp that holds S reads louder at the
   dark end than the mark it belongs to.

   The neutrals are near-achromatic (4–8%), per the site: RamJet tints its
   greys toward the accent at up to 14%, which on violet would read as a lilac
   page.

   RamJet expresses most of its surfaces through the ramps, so swapping the
   ramps carries the sidebar's active marker, the link colour, the edge
   gradient and the separator with no further word. Everything below the ramps
   is the set that names a hue literally, restated on the new pair.
   ══════════════════════════════════════════════════════════════════════════ */

/* The theme reads an `em` in the paragraph after an `h1` as a page subtitle
   and blocks it out. The reference chapters are split from SPEC.md, whose
   opening paragraphs use emphasis as emphasis — §15 opens with *has* — so
   the convention is switched off; this book has no subtitles. */
.content h1 + p em {
    display: inline;
    margin: 0;
    font-style: italic;
    color: inherit;
}

:root {
    /* --- Accent: violet, hue 250 --- */
    --accent-50: hsl(250, 70%, 97.5%);
    --accent-100: hsl(250, 70%, 94%);
    --accent-200: hsl(250, 80%, 88%);
    --accent-300: hsl(250, 74%, 80%);
    --accent-400: hsl(250, 74%, 74%);
    --accent-500: hsl(250, 52%, 64%);
    --accent-600: hsl(250, 41%, 55%);
    --accent-700: hsl(250, 40%, 46%);
    --accent-800: hsl(250, 38%, 36%);
    --accent-900: hsl(250, 36%, 26%);
    --accent-950: hsl(250, 40%, 14%);

    /* --- Secondary: watermelon, hue 350 --- */
    --secondary-50: hsl(352, 100%, 97.5%);
    --secondary-100: hsl(354, 100%, 94%);
    --secondary-200: hsl(355, 98%, 88%);
    --secondary-300: hsl(355, 98%, 82%);
    --secondary-400: hsl(352, 85%, 72%);
    --secondary-500: hsl(350, 77%, 62%);
    --secondary-600: hsl(351, 62%, 52%);
    --secondary-700: hsl(346, 68%, 45%);
    --secondary-800: hsl(344, 75%, 36%);
    --secondary-900: hsl(342, 100%, 29%);
    --secondary-950: hsl(342, 90%, 16%);

    /* --- Neutrals: a whisper of violet, never a tint --- */
    --gray-50: hsl(250, 8%, 98%);
    --gray-100: hsl(250, 7%, 93%);
    --gray-200: hsl(250, 6%, 87%);
    --gray-300: hsl(250, 5%, 72%);
    --gray-400: hsl(250, 4%, 58%);
    --gray-500: hsl(250, 5%, 48%);
    --gray-600: hsl(250, 5%, 34%);
    --gray-700: hsl(250, 7%, 26%);
    --gray-800: hsl(250, 8%, 17%);
    --gray-900: hsl(250, 8%, 11%);
    --gray-950: hsl(250, 10%, 8%);
}

/* ── Light ──────────────────────────────────────────────────────────────── */

.light,
html:not(.js) {
    /* Sidebar: violet at the top where the logo sits, watermelon at the foot.
       The 330 waypoint keeps the run inside the pink-purple family instead of
       passing through grey. */
    --sidebar-background: hsl(250, 33%, 93%);
    --sidebar-gradient: linear-gradient(
        210deg in oklab,
        hsl(250, 45%, 92.5%) 0%,
        hsl(250, 36%, 93.5%) var(--warm-turn),
        hsl(330, 40%, 94%) 82%,
        hsl(350, 60%, 94%) 100%
    );
    --sidebar-spacer-color: hsl(250, 28%, 86%);

    /* Selection: the brand's own wash, the ground the site's chip sits on. */
    --selection-background: hsl(352, 90%, 88%);

    --header-background: hsl(250deg 15% 90% / 20%);

    /* Hovers are the accent's, per the site — RamJet's one call this file
       does not follow. */
    --icon-hover-background: hsla(250, 60%, 60%, 0.16);
    --icon-hover-color: var(--accent-700);

    --kbd-background: hsl(250, 40%, 93%);

    --table-header-gradient: linear-gradient(
        100deg in oklab,
        hsl(250, 60%, 92%) -10%,
        hsl(250, 45%, 94%) var(--warm-turn),
        hsl(350, 80%, 94%) 140%
    );

    /* Alert hairlines. NOTE is the accent's family and IMPORTANT the brand's,
       so the pair brackets the set as it does in RamJet. CAUTION moves to a
       red-orange: RamJet's true red (352) sits on top of watermelon here
       exactly as RamJet's orange sat on top of ember. Each drifts ~20° away
       from its nearest neighbour and pales as it goes. */
    --alert-note-gradient: linear-gradient(
        135deg in oklab, hsl(250, 55%, 72%), hsl(272, 34%, 80%));
    --alert-tip-gradient: linear-gradient(
        135deg in oklab, hsl(145, 38%, 61%), hsl(172, 26%, 71%));
    --alert-important-gradient: linear-gradient(
        135deg in oklab, hsl(350, 70%, 72%), hsl(330, 44%, 80%));
    --alert-warning-gradient: linear-gradient(
        135deg in oklab, hsl(42, 52%, 64%), hsl(64, 32%, 74%));
    --alert-caution-gradient: linear-gradient(
        135deg in oklab, hsl(12, 62%, 62%), hsl(30, 40%, 74%));

    --nav-wash-1: hsl(250, 18%, 95.5%);
    --nav-wash-3: hsl(350, 30%, 95.5%);
    --nav-wash-1-hover: hsl(250, 28%, 92%);
    --nav-wash-3-hover: hsl(350, 42%, 92%);

    --code-background: hsla(250, 8%, 99.2%, 0.95);
    /* Translucent for RamJet's reason: on a phone the block has no hairline,
       so the edge gradient reads through the fill instead of round it. */
    --code-background-mobile: hsla(250, 8%, 97.5%, 0.88);
    /* The chip follows RamJet's shape — an even split at low saturation and
       alpha, a tint under the text — on the site's pair. */
    --inline-code-background: hsla(250, 30%, 55%, 0.04);
    --inline-code-gradient: linear-gradient(
        102deg in oklab,
        hsla(250, 40%, 58%, 0.06) 0%,
        hsla(250, 40%, 58%, 0.06) 15%,
        hsla(350, 50%, 62%, 0.06) 100%
    );

    --search-mark-background: hsla(350, 85%, 68%, 0.38);

    --table-cell-border-color: hsla(250, 35%, 45%, 0.13);
    --table-alternate-background: hsl(250, 8%, 96.5%);

    --theme-hover-background: hsla(250, 30%, 60%, 0.12);

    --blockquote-note-color: hsl(250, 55%, 66%);
    --blockquote-caution-color: hsl(12, 65%, 58%);
    --admonition-note-background: hsl(250, 60%, 96.5%);
    --admonition-caution-background: hsl(12, 70%, 96.5%);
    --admonition-important-background: hsl(350, 90%, 96.5%);
    --admonition-note-gradient: linear-gradient(
        135deg in oklab, hsl(250, 62%, 95.5%), hsl(272, 40%, 96.8%));
    --admonition-important-gradient: linear-gradient(
        135deg in oklab, hsl(350, 85%, 95.6%), hsl(330, 50%, 97%));
    --admonition-caution-gradient: linear-gradient(
        135deg in oklab, hsl(12, 70%, 95.6%), hsl(30, 48%, 97%));
}

/* ── Dark ───────────────────────────────────────────────────────────────── */

.coal {
    /* The site's dark ground is a 7% grey; the book's page sits a step under
       it so the sidebar wash has something to stand off. */
    --page-background: hsl(250, 5%, 5%);

    --sidebar-background: hsl(250, 26%, 12%);
    --sidebar-gradient: linear-gradient(
        210deg in oklab,
        hsl(250, 30%, 12%) 0%,
        hsl(250, 26%, 12.5%) var(--warm-turn),
        hsl(330, 20%, 13%) 82%,
        hsl(350, 26%, 14%) 100%
    );
    --sidebar-spacer-color: hsl(250, 20%, 21%);

    /* The dark selection carries more colour than the light one for the reason
       the site's bloom does: over black there is nothing to lighten toward but
       white, so saturation buys the hue and lightness stays down. */
    --selection-background: hsl(348, 48%, 34%);

    --header-background: hsl(250deg 30% 16% / 25%);
    --header-border-color: hsl(250, 22%, 24%);

    --icon-hover-background: hsla(250, 60%, 65%, 0.20);
    --icon-hover-color: var(--accent-300);

    --kbd-background: hsl(250, 22%, 17%);

    --edge-gradient: linear-gradient(
        135deg in oklab,
        var(--accent-600) -10%,
        hsl(250, 18%, 28%) 42%,
        var(--secondary-700) 140%
    );
    --table-header-gradient: linear-gradient(
        100deg in oklab,
        hsl(250, 36%, 16%) -10%,
        hsl(250, 24%, 15.5%) var(--warm-turn),
        hsl(350, 36%, 17%) 140%
    );

    --alert-note-gradient: linear-gradient(
        135deg in oklab, hsl(250, 42%, 44%), hsl(272, 28%, 50%));
    --alert-tip-gradient: linear-gradient(
        135deg in oklab, hsl(145, 44%, 33%), hsl(172, 26%, 42%));
    --alert-important-gradient: linear-gradient(
        135deg in oklab, hsl(350, 58%, 50%), hsl(330, 36%, 56%));
    --alert-warning-gradient: linear-gradient(
        135deg in oklab, hsl(42, 54%, 38%), hsl(64, 30%, 46%));
    --alert-caution-gradient: linear-gradient(
        135deg in oklab, hsl(12, 58%, 44%), hsl(30, 36%, 50%));

    --nav-wash-1: hsl(250, 14%, 15%);
    --nav-wash-3: hsl(350, 20%, 15.5%);
    --nav-wash-1-hover: hsl(250, 20%, 19.5%);
    --nav-wash-3-hover: hsl(350, 26%, 20%);

    --code-background: hsla(250, 10%, 11%, 0.94);
    --inline-code-color: var(--accent-200);
    --inline-code-background: hsla(250, 30%, 62%, 0.07);
    --inline-code-gradient: linear-gradient(
        102deg in oklab,
        hsla(250, 40%, 64%, 0.09) 0%,
        hsla(250, 40%, 64%, 0.09) 15%,
        hsla(350, 45%, 64%, 0.09) 100%
    );

    --search-bar-background: hsl(250, 18%, 14%);
    --search-bar-shadow-color: hsl(250, 36%, 22%);
    --search-results-item-background: hsl(250, 20%, 14%);
    --search-mark-background: hsla(350, 75%, 62%, 0.42);

    --table-cell-border-color: hsla(250, 35%, 55%, 0.16);
    --table-fill: hsla(250, 5%, 5%, 0.97);
    --table-alternate-background: hsl(250, 8%, 10.5%);

    --quote-background: hsl(250, 16%, 13%);
    --quote-border-color: hsl(250, 16%, 20%);

    --theme-popup-background: hsl(250, 18%, 12%);
    --theme-hover-background: hsla(250, 30%, 60%, 0.12);

    --blockquote-note-color: hsl(250, 55%, 66%);
    --blockquote-caution-color: hsl(12, 62%, 56%);
    --admonition-note-background: hsl(250, 28%, 14%);
    --admonition-caution-background: hsl(12, 32%, 14%);
    --admonition-important-background: hsl(350, 32%, 14%);
    --admonition-note-gradient: linear-gradient(
        135deg in oklab, hsl(250, 34%, 16%), hsl(272, 24%, 13.5%));
    --admonition-important-gradient: linear-gradient(
        135deg in oklab, hsl(350, 38%, 16.5%), hsl(330, 26%, 14%));
    --admonition-caution-gradient: linear-gradient(
        135deg in oklab, hsl(12, 38%, 16%), hsl(30, 26%, 13.8%));
}

/* ── Figures keep Lini's own palette ────────────────────────────────────────
   RamJet repoints Lini's `teal` and `orange` ramps and its `--accent` at the
   book's two colours, so a two-series chart comes out in the theme's pair.
   Right for a book about something else; wrong for this one, which documents
   the palette by name — a `--teal-wash` card that renders violet would be a
   figure contradicting the sentence beside it. Lini's own values, restated
   unlayered so they win back what RamJet's unlayered aliases took. */
.lini {
    --lini-accent: light-dark(#0a84ff, #4aa3ff);

    --lini-teal-wash: light-dark(#cdf9f4, #07312e);
    --lini-teal-soft: light-dark(#79e3da, #004f4a);
    --lini-teal: light-dark(#00b8ac, #008b81);
    --lini-teal-deep: light-dark(#008e85, #00cabe);
    --lini-teal-ink: light-dark(#005d56, #4ffffa);

    --lini-orange-wash: light-dark(#ffe8d2, #3b2413);
    --lini-orange-soft: light-dark(#ffbd8d, #662e00);
    --lini-orange: light-dark(#e47600, #b44a00);
    --lini-orange-deep: light-dark(#b45700, #f39042);
    --lini-orange-ink: light-dark(#7e2800, #ffcd84);
}