/**
 * Purceivo — design tokens
 * ─────────────────────────
 * One source of truth for the three surfaces (landing, dashboard,
 * settings), which each carried their own copy of this palette and drifted.
 *
 * The identity is editorial, not software: paper and ink, oxblood for
 * consequence, brass for measure. The forward-looking quality is meant to
 * come from precision — a real modular scale, hairline rules, restraint —
 * rather than from the gradients and glass that currently signify
 * "technology company" and date within eighteen months.
 */

:root {
  /* ── surface ── */
  --paper:      #EFEAE0;   /* the page */
  --paper-2:    #E6DFD1;   /* recessed: wells, insets */
  --card:       #FAF6EC;   /* raised: cards, panels */

  /* ── ink ── */
  --ink:        #101216;   /* body, headlines */
  --ink-soft:   #2A2D33;   /* secondary prose */
  --ink-mute:   #5A5A55;   /* labels, captions, metadata */

  /* ── accent ── */
  --navy:       #12253F;   /* focus, selection */
  --oxblood:    #7A2A1E;   /* consequence: emphasis, the mark */
  --brass:      #B8873F;   /* measure: figures, annotation */

  /* ── rules ── */
  --hair:       #C3BBA9;   /* structural divisions */
  --hair-2:     #D6CFC0;   /* internal divisions */

  /* ── inverted surface ──
     One section of the landing page runs dark, the way a magazine runs a
     black spread: a tonal shift that resets attention without leaving the
     typographic system. */
  --void:       #0C0E11;
  --void-2:     #14171C;
  --void-ink:   #E8E3D8;
  --void-mute:  #8A8579;
  --void-hair:  #262A31;

  /* ── semantic ── */
  --ok:         #2E5E3A;
  --warn:       #8A5A12;
  --danger:     #7A2A1E;
  --focus:      #12253F;

  /* ── type ──
     A major-third scale (1.25). Every size on the page is a step on it;
     nothing is chosen by eye. */
  --t-2xs:  10px;
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   21px;
  --t-xl:   27px;
  --t-2xl:  34px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  clamp(60px, 11vw, 148px);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* Tracking: uppercase mono labels need air; display type needs the
     opposite, and gets tighter as it grows. */
  --track-label:   .16em;
  --track-display: -.022em;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── space ── a 4px grid, named by step rather than by pixel ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 176px;

  --measure: 62ch;          /* the longest a line of prose may run */
  --gutter:  clamp(20px, 4vw, 56px);
  --page:    1240px;

  /* ── motion ──
     Subtractive: things leave rather than arrive. Durations are long
     enough to read as deliberate and short enough not to be waited on. */
  --ease:      cubic-bezier(.2,.7,.15,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --d-fast:    .18s;
  --d-base:    .34s;
  --d-slow:    .62s;
  --d-cinema: 1.1s;
}

/* Motion is decoration here, never information. Everything below resolves
   to its end state instantly when the reader has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: .01ms; --d-base: .01ms; --d-slow: .01ms; --d-cinema: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── primitives shared by every surface ── */

*, *::before, *::after { box-sizing: border-box }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
::selection { background: var(--navy); color: var(--paper) }

/* A visible focus ring is a professional obligation, not a style choice.
   :focus-visible keeps it off the mouse and present for the keyboard. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.mono  { font-family: var(--font-mono) }
.serif { font-family: var(--font-display) }

/* The uppercase mono label used across all three surfaces for metadata. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.wrap {
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Screen-reader-only, for the skip link and figure descriptions. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: top var(--d-fast) var(--ease);
}
.skip:focus { top: var(--s-4) }