/* web/trova-tokens.css
   Trova design tokens (design-pass brief §1). EXTENDS landing/index.html's token
   set exactly: same paper, ink, coral, gold values; builder-only additions are the
   meter family, motion, and shadow tokens. Governing rule (visual system §15):
   warm editorial CONTENT on a clean modern FRAME. Paper-only in v1; the dark
   "dusk" scheme is deferred.
   Rules of use: bright values (--gold-line, --sage-fill, --clay-fill, coral fills)
   are fills/display only; text at reading size uses the darkened partner
   (--gold-deep, --sage, --clay, --coral-deep). Gold-line never carries meaning
   without an ink casing. No pure black. White appears only on --card. */
:root {
  /* color · paper and ink */
  --paper: #faf7f1;
  --card: #ffffff;
  --mat: #f4efe6;
  --map-paper: #f5eede;
  --ink: #221e1a;
  --ink-soft: #5f574f;
  --ink-faint: #8a8178;
  --hairline: #eae3d8;

  /* color · gold (the route, and what is kept) */
  --gold: #b8912f;
  --gold-line: #d8b968;   /* decorative hairlines only, never text */
  --gold-deep: #866a22;   /* gold at reading size */

  /* color · coral (the single accent) */
  --coral: #d1573c;       /* fills, primary CTA */
  --coral-deep: #b8492f;  /* white-text CTA fills / text (WCAG AA) */
  --coral-press: #9c3a24; /* CTA :active / pressed */

  /* color · teal (reserved for live position; declared, unused here) */
  --teal: #2b7a75;

  /* color · meter family (bright value = bar fill ONLY; text uses the dark one) */
  --sage: #5c7150;
  --sage-fill: #7d9070;
  --clay: #7c5f1e;
  --clay-fill: #dda23a;
  --coral-meter-fill: #d1573c;

  /* color · map pins (The Legible Trip). Pin color states what KIND of place a stop
     is; the pin's number already states the day. These are literal values, not var()
     aliases, because atlas.mjs emits them as var(token,hex) fallbacks for standalone
     rasterization and test/a11y-contrast.test.mjs reads the hexes directly.
     Each mirrors an existing token; no new color enters the system.
     Numeral rule: the four category pins carry a --paper numeral, plain gold keeps ink. */
  --pin-food: #b8492f;    /* = --coral-deep. NOT --coral: it fails 4.5:1 under either numeral */
  --pin-nature: #5c7150;  /* = --sage */
  --pin-history: #7c5f1e; /* = --clay */
  --pin-oddity: #221e1a;  /* = --ink */
  --pin-plain: #b8912f;   /* = --gold: uncategorized, and the road itself */

  /* type · Fraunces on content ONLY (title, stop names, hero/payoff lines);
     Hanken Grotesk on all chrome */
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, system-ui, 'Segoe UI', sans-serif;
  /* Personal Layer serif alias: .co-dedication/.keep-dedication/.side-aside/
     .daily-note read var(--font-serif, ...) — point it at the display stack so
     they render in Fraunces like the builder, not the Georgia fallback. */
  --font-serif: var(--disp);
  --paper-2: #f2ead8;                /* deeper paper for the .daily-note field */
  --fs-hero: clamp(28px, 7vw, 36px); /* Fraunces italic */
  --fs-title: 24px;
  --fs-stop: 20px;                   /* Fraunces ~540, lh 1.2 */
  --fs-body: 15px;
  --fs-sub: 14px;
  --fs-label: 13px;                  /* weight 600 */
  --fs-micro: 12px;                  /* letter-spacing .04em */

  /* space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* shadow (soft depth, never grain) */
  --shadow-card: 0 1px 2px rgba(34,30,26,.06), 0 3px 10px rgba(40,30,20,.05);
  --shadow-raised: 0 2px 4px rgba(34,30,26,.10), 0 10px 24px rgba(40,30,20,.12);
  --shadow-poster: 0 10px 24px rgba(60,44,26,.20), inset 0 0 0 1px rgba(60,44,26,.12);

  /* motion · durations */
  --t-tap: 90ms;
  --t-quick: 160ms;
  --t-move: 240ms;
  --t-flip: 320ms;
  --t-settle: 420ms;
  --t-draw: 2200ms;

  /* motion · easings (never bouncier than --ease-settle) */
  --ease-out: cubic-bezier(.25,.75,.25,1);
  --ease-settle: cubic-bezier(.30,1.25,.45,1);
  --ease-ink: cubic-bezier(.45,.05,.55,.95);
}

/* Off-screen but present for assistive tech: the persistent #a11y-live region uses this
   so announcements reach a screen reader without any visible artifact on the page. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The ODbL credit under any map that draws the corridor. It lives here, beside the other
   cross-page utility, because four surfaces render it (builder, co-pilot, Keep, and the
   gift reveal, which reuses Keep's view) and three copies of one rule is how they drift.
   Quiet on purpose, but NOT decoration: a legally required attribution is meaningful text,
   so it sits at the legible secondary tier (--ink-soft, ~6.6:1 on paper), not --ink-faint,
   which is 3.58:1 at this micro size and fails WCAG AA for a credit a reader must be able to
   read. It reads as a credit line and not a banner because it is small and letter-spaced,
   not because it is too faint to see. */
.map-credit {
  margin: 0;
  padding: 0 var(--sp-2) var(--sp-1);
  font: 400 var(--fs-micro) / 1.4 var(--sans);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* The reduced-motion global kill: every moment has a complete static end state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}