/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — the design system. Every value the new pages use lives
   here and nowhere else. If a rule elsewhere contains a raw hex, px size
   or duration, it's a bug in that rule, not a missing token here.

   Two layout registers, both defined here:

     screen — full-viewport composed sections. The homepage and landing
              moments. Low density, type as the event.
     dense  — utility pages: the library's 161 filterable stories, FAQ,
              calendar. High density, scannable, no full-height sections.

   They share this palette, this type scale and this space scale, which is
   what keeps them recognisably the same site.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the evening, top to bottom ──────────────────────────────────── */
  --lamp:#2b2017;        /* lamp-lit room, warm brown-black */
  --dusk:#1f2231;        /* the light going blue */
  --deep:#151b2e;        /* properly evening */
  --night:#0e111b;       /* night */
  --sleep:#070a11;       /* asleep — deepest ground */

  /* the one lit band, for pages that need daylight legibility */
  --paper:#efe4d2;
  --paper-ink:#231a11;
  --paper-soft:#5f5546;
  --paper-faint:#6b6153;   /* AA-checked: 4.8:1 on --paper */

  /* ── ink on the dark grounds ─────────────────────────────────────── */
  --moon:#f7ecd8;        /* primary        — 14:1 on --night */
  --soft:#a7b1c0;        /* secondary      —  7.7:1 */
  --faint:#848f9f;       /* tertiary       —  4.8:1 on the lightest band */

  /* ── the accent. Actions only. Never a label, bullet, eyebrow or
        meta line — the moment gold means four things it means none. ── */
  --gold:#ffd483;
  --gold-ink:#2a1e06;    /* 11.7:1 on --gold */
  --gold-lift:#ffe1a4;   /* hover only */

  --err:#ff8b8b;

  /* ── type ───────────────────────────────────────────────────────────
     Fraunces for display and titles, with SOFT and WONK doing real work
     at large sizes. DM Sans for interface. Literata for story text only —
     it is the one face tuned for reading 700 words aloud in a dim room. */
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --read:'Literata',Georgia,serif;

  /* screen register: one display step, deliberately far above the rest.
     That gap is what makes it read as a voice, not a heading. */
  --t-display:clamp(52px,11vw,168px);
  --t-hero:clamp(34px,6vw,86px);

  /* shared scale */
  --t-h2:clamp(22px,2.6vw,38px);
  --t-h3:clamp(18px,1.1vw + 15px,22px);
  --t-lead:clamp(17px,.5vw + 15px,20px);
  --t-body:16.5px;
  --t-small:14px;
  --t-micro:12.5px;

  /* story text: independent of UI sizing, scaled by godnat_font_scale */
  --t-story:calc(19px * var(--font-scale,1));
  --lh-story:1.75;
  --measure-story:34em;    /* ~66 characters */

  /* ── space. One scale. Nothing invents its own padding. ─────────── */
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:36px; --s7:56px; --s8:80px; --s9:112px;

  /* ── radius. Two, and they mean different things: art is nearly
        square-cornered, only things you press are round. ── */
  --r-art:6px;
  --r-panel:14px;
  --r-press:999px;

  /* ── layout ─────────────────────────────────────────────────────── */
  --page:1200px;           /* screen register */
  --page-dense:1120px;     /* dense register */
  /* The approved six-screen design used a generous gutter; the earlier
     value here came from the abandoned v3 mockup and quietly narrowed
     every screen by 20px a side at desktop width. */
  --gutter:clamp(20px,5vw,72px);
  --nav-h:64px;

  /* ── motion. Slow on purpose: the job is to settle a room down. ─── */
  --ease:cubic-bezier(.16,.84,.28,1);
  --t-fast:.18s;
  --t-mid:.5s;
  --t-slow:1.4s;

  --hairline:rgba(160,180,190,.13);
  --hairline-lit:rgba(35,26,17,.14);
}

/* Dæmpet lys — warm multiply overlay, applied before first paint so it
   never flashes. Set html.dim from the header, not from a page script. */
html.dim body{ filter:brightness(.82) sepia(.06); }

/* Reduced motion is honoured globally. Individual components should not
   need their own @media block; if one does, it is doing too much. */
@media(prefers-reduced-motion:reduce){
  :root{ --t-fast:0s; --t-mid:0s; --t-slow:0s; }
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}