/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    --font-mono:
        "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        monospace;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* Spacing — scale */
    --space-xs: 0.5rem;
    --space-s: clamp(0.7rem, 0.55rem + 0.35vi, 1rem);
    --space-m: clamp(1.1rem, 0.85rem + 0.6vi, 1.5rem);
    --space-l: clamp(1.6rem, 1.15rem + 1vi, 2rem);
    --space-xl: clamp(2.25rem, 1.45rem + 1.5vi, 3rem);
    --space-2xl: clamp(3rem, 1.5rem + 3vi, 6rem);

    /* Spacing — semantic */
    /*
     * Convention: use --space-* tokens for all layout and rhythm spacing.
     *   --space-xs  Tight UI gaps (nav links, tag lists, inline groups)
     *   --space-s   Footnote item gaps, small inset padding, skip-link nudge
     *   --space-m   Component padding, metadata margins, footer inset
     *   --space-l   Default prose rhythm (p, ul, pre, between siblings)
     *   --space-xl  In-article section breaks (h2 top margin, footnotes top)
     *   --space-2xl Page-level transitions (nav bottom, h1 bottom, header margins, footer top)
     *
     * Intentional non-token values (sub-scale micro-details):
     *   2px            Link underline offset — pixel-precise decorative gap
     *   0.1em / 0.12em Inline pill padding (sup links, code) — em-relative to local font size
     *   0.15em         Inline code padding in tweet cards — same rationale
     *   -0.25rem       pre bleed on mobile (negative offset, no token equivalent)
     */
    --page-pad-y: clamp(1.5rem, 1rem + 1.2vi, 3rem);
    --page-pad-x: clamp(1.25rem, 0.75rem + 1.5vi, 3.5rem);
    --page-pad-b: clamp(2.5rem, 1.5rem + 2vi, 5rem);

    /* Type scale — raw values */
    --scale-xs: clamp(0.75rem, 0.7rem + 0.1vi, 0.82rem);
    --scale-sm: clamp(0.8rem, 0.76rem + 0.12vi, 0.88rem);
    --scale-md: clamp(0.88rem, 0.84rem + 0.12vi, 0.95rem);
    --scale-base: clamp(1rem, 0.96rem + 0.12vi, 1.06rem);
    --scale-lg: clamp(1rem, 0.98rem + 0.15vi, 1.125rem);
    --scale-xl: clamp(1.125rem, 1.05rem + 0.35vi, 1.35rem);
    --scale-2xl: clamp(1.5rem, 1.25rem + 1vi, 2rem);
    --scale-3xl: clamp(2rem, 1.5rem + 2vi, 3rem);

    /* Type scale — semantic */
    --text-size-sm: var(--scale-xs);
    --text-size-ui: var(--scale-sm);
    --text-size-code: var(--scale-md);
    --text-size-body: var(--scale-base);
    --text-size-prose: var(--scale-lg);
    --text-size-lead: var(--scale-xl);
    --text-size-prose-h: var(--scale-2xl);
    --text-size-h1: var(--scale-3xl);
    --text-size-icon: 1.5rem;
    --text-size-icon-lg: 2rem;

    /* Palette — light */
    --palette-warm-grey: #f7f7f7;
    --palette-ink: #1a1a1a;
    --palette-clay: #8a6a64;

    /* Palette — dark */
    --palette-night: oklch(19% 0.012 269);
    --palette-silver: #b1b1b1;
    --palette-lavender: #a89cff;
    --palette-white: white;

    /* Semantic — colours */
    --color-bg: var(--palette-warm-grey);
    --color-fg: var(--palette-ink);
    --color-heading: var(--color-fg);
    --color-subtle: color-mix(in oklch, var(--color-bg), black 3%);
    --color-accent: var(--palette-clay);
    --color-highlight: color-mix(in srgb, var(--color-accent), transparent 60%);
    --color-muted: color-mix(
        in oklch,
        var(--color-subtle),
        var(--color-fg) 35%
    );
    --color-backdrop: color-mix(in oklch, var(--color-bg) 95%, transparent);
}