/* ── Design tokens — load this before any other stylesheet ────────────────── */
:root {
    /* Base surface tone — adjust these three to retheme everything */
    --h: 192;   /* hue */
    --s: 5%;    /* saturation */
    --l: 16%;   /* lightness of the main background */

    /* Computed surface colors */
    --bg:              hsl(var(--h), var(--s), var(--l));
    --border:          hsl(var(--h), var(--s), calc(var(--l) + 25%));
    --text:            hsl(var(--h), var(--s), calc(var(--l) + 55%));
    --text-heading:    hsl(var(--h), var(--s), calc(var(--l) + 52%));
    --scrollbar-track: hsl(var(--h), var(--s), calc(var(--l) - 11%));
    --scrollbar-thumb: hsl(var(--h), var(--s), calc(var(--l) - 3%));

    /* Brand / accent — independent */
    --brand: #6ca6b0;
    --ai:    #ab68ff;
    --link:  #589df6;
}