/* tokens.css — Mirror's design primitives. Owner: m5 (Designer + Vision-Keeper).
   Plain CSS, no @import / no fetch, native font-stack only — so bundle.mjs inlines it
   into a single offline-openable dist/index.html (CONTRACT §7).

   The aesthetic thesis: Mirror is the ANTI-FEED.
   A feed is loud, dense, infinite, engineered with red/blue engagement signals.
   Mirror is the inverse — warm paper, deep ink, ONE quiet sage accent, and a lot of
   space. Whitespace here is not emptiness; it is the attention being handed back.
   The palette is honest and quiet on purpose: nothing on this surface is trying to
   keep you here. (No vanity colour, no notification red, no gradient dopamine.)

   Colour coherence as a guardrail signal: the two accent hues ARE the data —
   --ink-self (sage #6d8b74) is the visitor's own seed colour; --ink-peer (clay #b5651d)
   is the one consented peer's seed colour. The system literally cannot render a third
   person's accent, because there is no third token. */

:root {
  /* ---- surface: warm paper, not screen-white ------------------------------ */
  --paper:        #f7f4ee;  /* page — soft warm off-white, easy on the eye */
  --paper-raised: #fffefb;  /* a panel lifted a hair above the page */
  --paper-sunk:   #efeae1;  /* a recessed well (fields, the reflected truth) */
  --line:         #e3ddd1;  /* hairline borders — barely there */
  --line-strong:  #cdc5b5;  /* a border that needs to be felt */

  /* ---- ink: deep warm near-black, never pure #000 ------------------------- */
  --ink:        #2a2723;  /* primary text */
  --ink-soft:   #5d574e;  /* secondary text, captions */
  --ink-faint:  #938b7d;  /* tertiary — timestamps, hints, the quiet labels */
  --ink-ghost:  #b8b0a1;  /* placeholders, disabled */

  /* ---- the two honest accents (= the seed colours, = the data) ------------ */
  --ink-self:      #6d8b74;  /* the visitor — sage. used for THEIR voice + the CTA. */
  --ink-self-deep: #506b58;  /* hover/active of the visitor's accent */
  --ink-self-wash: #e8efe7;  /* a sage tint for the visitor's own panels */
  --ink-peer:      #b5651d;  /* the ONE consented peer — clay. used only post-cross. */
  --ink-peer-wash: #f2e6d6;  /* a clay tint for the peer's panels (post-cross only) */

  /* No red. No "alert". The only state colour is a muted clay-amber for the
     gentle "you can't go there yet" redirect notice — never alarming. */
  --whisper:      #8a7a5c;  /* the colour of a quiet "not yet", earthy not angry */

  /* ---- type: serif for the human voice, sans for the machinery ------------ */
  /* Native stacks only — no Google Fonts <link> (won't load offline in dist). */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
                Arial, "Helvetica Neue", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;

  /* A calm, slightly editorial type scale. Display tiers use clamp() so the
     landing breathes on desktop and stays readable on a 390px phone. */
  --t-display: clamp(2.1rem, 1.4rem + 3.0vw, 3.6rem);  /* the landing headline */
  --t-h1:      clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);  /* a surface title */
  --t-h2:      clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
  --t-lead:    clamp(1.08rem, 1.0rem + 0.5vw, 1.28rem); /* lead / framing prose */
  --t-body:    1.0625rem;   /* 17px — comfortable reading body */
  --t-sm:      0.9375rem;   /* 15px */
  --t-xs:      0.8125rem;   /* 13px — labels, timestamps */
  --t-label:   0.72rem;     /* 11.5px — the all-caps eyebrow labels */

  --lh-tight:  1.12;   /* display */
  --lh-snug:   1.3;    /* headings */
  --lh-body:   1.62;   /* reading prose — roomy, unhurried */

  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --tracking-label: 0.14em;  /* the eyebrow label letterspacing */

  /* ---- spacing: an 8px-ish rhythm, with generous reading measures --------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  --measure:        38rem;   /* max reading width — keeps prose honest */
  --measure-narrow: 30rem;   /* the ceremony / single-act column */
  --shell-pad:      var(--s-5);  /* page gutter (mobile) */

  /* ---- radii: soft, paper-like, never pill-y app chrome ------------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;

  /* ---- shadows: faint, warm, like paper on a desk — no harsh app shadow --- */
  --shadow-sm: 0 1px 2px rgba(42, 39, 35, 0.04);
  --shadow-md: 0 2px 8px rgba(42, 39, 35, 0.05), 0 1px 2px rgba(42, 39, 35, 0.04);
  --shadow-lg: 0 8px 30px rgba(42, 39, 35, 0.07), 0 2px 8px rgba(42, 39, 35, 0.05);
  --ring:      0 0 0 3px rgba(109, 139, 116, 0.28);  /* focus ring, sage */

  /* ---- motion: slow, deliberate. nothing snaps for a dopamine hit. -------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   620ms;   /* the contemplative fade-in of a surface */

  --z-bar:  50;
  --z-top:  100;
}

/* Honour a reader who's asked the OS for less motion — calm means calm. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* ====================== view-token alias layer ============================
   The view authors (m2 mirror/landing, m3 cross, m4 you/with) reached for their
   own token names — --accent, --ink-dim, --space-N, --step-N, --radius, --bg,
   --node-color, --ok, --font-*. Each view carries an inline fallback so it renders
   standalone, but those fallbacks drift from this canonical system. Aliasing the
   names HERE binds every surface to ONE source of truth: retune a token above and
   the whole artefact tracks, no view edits needed. This is purely additive to m5's
   own file — it does not touch anyone's view. Vision-keeping at the token layer:
   the palette stays honest and coherent across every screen by construction. */
:root {
  /* the self accent (sage) — the visitor's voice + every CTA */
  --accent:       var(--ink-self);
  --accent-deep:  var(--ink-self-deep);
  --accent-dim:   var(--ink-self-deep);
  --accent-ink:   #ffffff;          /* text on the sage button */
  --accent-wash:  var(--ink-self-wash);
  --shift:        var(--ink-self);  /* belief-movement "now" marker */

  /* a node's accent — peer surfaces set this inline from store node.color (data-driven);
     default to the self accent so an un-themed node still reads in-palette. */
  --node-color:   var(--ink-self);

  /* the affirm / settled-vow colour. NOT a saturated leaderboard green — Mirror's
     "yes" is the same quiet sage as everything else. */
  --ok:           var(--ink-self);

  /* ink role aliases */
  --ink-dim:      var(--ink-faint);

  /* surface aliases */
  --bg:           var(--paper);
  --bg-elev:      var(--paper-raised);
  --surface:      var(--paper-raised);
  --focus:        var(--ink-self);
  --maxw:         var(--measure);

  /* spacing scale alias (views' --space-N → m5's --s-N rhythm) */
  --space-1: var(--s-2);   /* views used .35rem; snap to the 8px rhythm */
  --space-2: var(--s-2);
  --space-3: var(--s-4);
  --space-4: var(--s-5);
  --space-5: var(--s-6);
  --space-6: var(--s-7);

  /* modular type scale alias (views' --step-N → m5's calm scale).
     step-0 = body; step-1 = the truth-action line (a touch above body); step-2..4 climb.
     Preserves each view's intended hierarchy while binding sizes to this system. */
  --step:    var(--t-body);
  --step-0:  var(--t-body);     /* 17px reading body */
  --step-1:  1.2rem;            /* ~19px — the prominent truth-action / section title */
  --step-2:  var(--t-h2);
  --step-3:  var(--t-h1);
  --step-4:  var(--t-display);

  /* radius + font aliases */
  --radius:    var(--r-md);
  --font:      var(--font-serif);
  --font-ui:   var(--font-sans);
  /* --font-serif and --font-sans already exist above; the views read them directly */
}