/* ============================================================
   Design tokens — the single source of truth.
   No raw hex, px font-size, or magic spacing outside this file.

   Colour: a cool neutral grey/white (Radix Sand) scale; a crimson
   accent by default, swappable (cobalt/indigo/gold) via the
   Customize widget, plus a coral "seal" reserved for small stamps.
   Type:   Newsreader (serif) carries headlines + post body;
   Inter runs the UI; JetBrains Mono plays the part of typed labels
   and stamped meta, the way a typewriter would mark up a letter.
   ============================================================ */

/* ----- Self-hosted fonts (variable, woff2) ----- */
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/fonts/Inter-var.woff2') format('woff2');
}
@font-face{
    font-family:'Newsreader';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url('/fonts/Newsreader-var.woff2') format('woff2');
}
@font-face{
    font-family:'Newsreader';
    font-style:italic;
    font-weight:200 800;
    font-display:swap;
    src:url('/fonts/Newsreader-italic-var.woff2') format('woff2');
}
@font-face{
    font-family:'JetBrains Mono';
    font-style:normal;
    font-weight:100 800;
    font-display:swap;
    src:url('/fonts/JetBrainsMono-var.woff2') format('woff2');
}

:root{
    /* ----- Cool graphite paper (dark = "card stock under a studio lamp") ----- */
    --sand-1:#15171c;
    --sand-2:#1d2027;
    --sand-3:#252832;
    --sand-4:#2d323c;
    --sand-5:#363c47;
    --sand-6:#434a56;
    --sand-7:#525a68;
    --sand-8:#677080;
    --sand-9:#7e8794;
    --sand-10:#9ba3af;
    --sand-11:#c2c8d1;
    --sand-12:#f3f4f6;

    /* ----- Accent — crimson fountain-pen ink, default (tuned for dark) -----
       Swappable at runtime via the public "Customize appearance" panel,
       which sets body[data-accent="…"] — see the Accent variants block
       below. These :root/.light-mode values are the "crimson" default. */
    --accent:#ff5b56;
    --accent-text:#ff8a85;
    --accent-contrast:#230907;

    /* ----- Decorative-only — vivid coral stamp (used sparingly, not
       swapped by the accent picker — it's a fixed brand mark) ----- */
    --seal:#ff6b65;
    --seal-contrast:#2a0e0c;

    /* ----- Swatch preview dots for the appearance panel (same hex in
       both themes — these are small UI chips, not page surfaces) ----- */
    --swatch-cobalt:#2f6fef;
    --swatch-crimson:#e23e35;
    --swatch-indigo:#6f62ff;
    --swatch-gold:#d9a93c;

    /* ----- Elevation: soft ambient + a tight stacked-paper lift ----- */
    --shadow-card:0 18px 40px -26px rgba(4,5,8,.6);
    --shadow-avatar:0 20px 48px -28px rgba(4,5,8,.6);
    --shadow-paper:
        0 1px 0 var(--sand-1),
        0 2px 0 var(--sand-4),
        0 3px 7px rgba(2,3,5,.35),
        0 16px 30px -18px rgba(2,3,5,.5);
    --shadow-press:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.04);

    /* ----- Type families -----
       Display/body: Newsreader, a printed page. Labels/meta: JetBrains
       Mono, a typewriter strike. Inter survives only for dense nav chrome. */
    --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
    --font-display:'Newsreader',Georgia,'Times New Roman',serif;
    --font-mono:'JetBrains Mono',ui-monospace,'Menlo',monospace;

    /* ----- Modular type scale (base 17px, ratio ~1.2) ----- */
    --text-xs:0.75rem;      /* 12px — eyebrows, meta */
    --text-sm:0.8125rem;    /* 13px — nav, pills */
    --text-md:0.9375rem;    /* 15px — secondary body */
    --text-base:1.0625rem;  /* 17px — body */
    --text-lg:1.25rem;      /* 20px — h3 */
    --text-xl:1.5rem;       /* 24px — card titles, h2 */
    --text-2xl:1.75rem;     /* 28px — post h2 */
    --text-display:clamp(2.4rem,6vw,4.2rem); /* hero / page titles */
    --text-display-sm:clamp(2.1rem,5.5vw,4rem);

    /* ----- Line-heights ----- */
    --leading-tight:1.1;
    --leading-snug:1.35;
    --leading-normal:1.6;
    --leading-relaxed:1.75;   /* sans long-form */
    --leading-serif:1.85;     /* serif body — slightly more */

    /* ----- Letter-spacing ----- */
    --tracking-display:-0.01em;
    --tracking-tight:-0.01em;
    --tracking-wide:0.02em;
    --tracking-eyebrow:0.18em;

    /* ----- Spacing scale (4px base) ----- */
    --space-1:0.25rem;
    --space-2:0.5rem;
    --space-3:0.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;
    --space-9:6rem;

    /* ----- Radii — round, default ----- */
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-pill:999px;

    /* ----- Layout widths ----- */
    --measure:640px;      /* readable line length */
    --width-content:920px;
    --width-wide:1180px;

    /* ----- Motion (see MOTION.md §1) ----- */
    --ease-out:cubic-bezier(0.22,1,0.36,1);
    --ease-in-out:cubic-bezier(0.65,0,0.35,1);
    --dur-instant:90ms;
    --dur-fast:160ms;
    --dur-base:260ms;
    --dur-slow:420ms;
}

/* ----- Semantic surface / text tokens ------------------------------------
   Declared on `body` (not :root) on purpose: var() substitution resolves
   against the element where the custom property is declared, so putting these
   here lets them recompute against body's themed Sand scale in light mode.
   ------------------------------------------------------------------------- */
body{
    --bg:var(--sand-1);
    --fg:var(--sand-12);
    --muted:var(--sand-11);
    --soft:var(--sand-10);
    --line:var(--sand-6);
    --line-strong:var(--sand-8);
    --card:var(--sand-2);
    --card-hover:var(--sand-3);
}

/* ----- Cool neutral paper (light = "crisp card stock on a grey desk") ----- */
body.light-mode{
    --sand-1:#eef0f2;
    --sand-2:#ffffff;
    --sand-3:#f6f7f9;
    --sand-4:#edeff2;
    --sand-5:#e1e4e9;
    --sand-6:#cbd0d8;
    --sand-7:#b7bec9;
    --sand-8:#9aa3b0;
    --sand-9:#7e8794;
    --sand-10:#626b78;
    --sand-11:#454d59;
    --sand-12:#171a1f;

    --accent:#c8291f;
    --accent-text:#a8211a;
    --accent-contrast:#ffffff;

    --seal:#f0453d;
    --seal-contrast:#ffffff;

    --shadow-card:0 18px 40px -28px rgba(23,26,31,.18);
    --shadow-avatar:0 20px 48px -30px rgba(23,26,31,.2);
    --shadow-paper:
        0 1px 0 var(--sand-1),
        0 2px 0 var(--sand-4),
        0 2px 5px rgba(23,26,31,.08),
        0 14px 26px -18px rgba(23,26,31,.16);
    --shadow-press:inset 0 1px 2px rgba(23,26,31,.14),inset 0 -1px 0 rgba(255,255,255,.7);
}

/* ============================================================
   Appearance panel — public, reversible overrides (see js/load.js).
   Default (no data-accent attr) is the crimson values above.
   ============================================================ */
body[data-accent="cobalt"]{--accent:#4f8eff;--accent-text:#6fa3ff;--accent-contrast:#0b1220}
body.light-mode[data-accent="cobalt"]{--accent:#2454d9;--accent-text:#1d45b8;--accent-contrast:#ffffff}

body[data-accent="indigo"]{--accent:#776bff;--accent-text:#8f85ff;--accent-contrast:#13111f}
body.light-mode[data-accent="indigo"]{--accent:#4b3df5;--accent-text:#3a2fe0;--accent-contrast:#ffffff}

body[data-accent="gold"]{--accent:#e9c46a;--accent-text:#f0d18a;--accent-contrast:#231c08}
body.light-mode[data-accent="gold"]{--accent:#a8791e;--accent-text:#8c6516;--accent-contrast:#ffffff}

/* Corners: "Round" (default, matches --radius-* above) vs "Cut" */
body[data-corners="sharp"]{--radius-sm:2px;--radius-md:3px;--radius-lg:4px}