/* ═══════════════════════════════════════════════════════════════
   HØNEFOSS BJJ — Design tokens (Hallmark · Bloom, atmospheric)
   Single source of truth. style.css references these by name only.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Colour (OKLCH, warm-charcoal anchor hue ~45) ──────────── */
    --color-paper:      oklch(14.5% 0.010 45);   /* warm near-black      */
    --color-paper-2:    oklch(18%   0.012 45);   /* elevated surface     */
    --color-paper-3:    oklch(22%   0.013 45);   /* hover elevation      */
    --color-rule:       oklch(30%   0.010 45);   /* faint line           */
    --color-neutral:    oklch(58%   0.010 45);   /* secondary            */
    --color-muted:      oklch(72%   0.008 45);   /* captions, meta       */
    --color-ink:        oklch(93%   0.008 60);   /* warm off-white       */
    --color-body:       oklch(85%   0.008 50);   /* body copy on dark    */
    --color-accent:     oklch(64%   0.19  35);   /* ember (the red mats) */
    --color-accent-ink: oklch(16%   0.012 45);   /* text on ember        */
    --color-focus:      oklch(70%   0.18  35);   /* ≥3:1 on paper        */

    /* ── Typography ─────────────────────────────────────────────── */
    --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
    --font-body:    "Geist", system-ui, sans-serif;
    --font-outlier: "Geist Mono", ui-monospace, "SF Mono", monospace;

    /* Scale — major third (1.25) from 16px */
    --text-xs:      0.64rem;
    --text-sm:      0.8rem;
    --text-base:    1rem;
    --text-md:      1.25rem;
    --text-lg:      1.5625rem;
    --text-xl:      1.9531rem;
    --text-2xl:     2.4414rem;
    --text-3xl:     3.0518rem;
    --text-display: clamp(3rem, 6vw + 1rem, 6rem);

    /* ── Spacing — 4pt scale, named by role ─────────────────────── */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;

    --page-gutter: clamp(1.25rem, 5vw, 4rem);
    --measure: 62ch;

    /* ── Rules ──────────────────────────────────────────────────── */
    --rule-hair: 1px;

    /* ── Radius (atmospheric: soft, elevated) ───────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* ── Elevation — one whisper shadow, warm-tinted ────────────── */
    --shadow-lift: 0 8px 28px oklch(10% 0.010 45 / 0.45);

    /* ── Motion (atmospheric: fade, hover states only) ──────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro:   120ms;
    --dur-short:   220ms;
    --dur-long:    420ms;

    /* ── Z-index — named levels only ────────────────────────────── */
    --z-base:     1;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}