/* ═══════════════════════════════════════════════════════════════════════════
   THE LOOPMMT WEBSITE — TOKENS · v1
   Loop MMT™ · CC BY-NC 4.0

   Layer 0 of the site's composition triple: the DNA — palette, type, rhythm,
   and layout tokens. shell.css (Layer 1) and per-component CSS (Layer 2) read
   their colours from the custom properties defined here.

   The hard rule: every colour is a CSS custom property (var(--*)). No hex
   literals appear in rules — only in comments, never in declarations.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ═══ 1. Identity tokens (inherited from the Brand System §3c) ═══
     These four are what the WORDMARK reads. The site surface re-binds them
     the four identity values match Score's live
     skin bit-for-bit. The mark's GEOMETRY never moves; only these four
     values swap. */

  --id-accent:  #bf4a20;   /* the one lit signal — persimmon (Score's --signal) */
  --id-ink:     #221d16;   /* the wordmark ink — warm dark brown (Score's --ink) */
  --id-ground:  #f7f2e8;   /* the ground the mark sits on — warm cream (Score's --paper) */
  --id-quiet:   #5b5246;   /* quiet text against the ground — muted (Score's --ink-2) */

  /* ═══ 2. Extended palette (matched to Score's live skin under) ═══
     Scarcity rule (Score §8, inherited): if everything is a signal, nothing
     is. The accent lives at the wordmark, on the room-level Signal pull-
     quote (one per Room, at most), on active nav state, and NOWHERE else. */

  --paper:      #f7f2e8;   /* the ground — same as --id-ground (Score's --paper) */
  --ink:        #221d16;   /* body ink — same as --id-ink (Score's --ink) */
  --muted:      #5b5246;   /* secondary text — same as --id-quiet (Score's --ink-2) */
  --faint:      #8d8475;   /* tertiary text (captions, metadata) (Score's --ink-3) */
  --hairline:   #d9d0bf;   /* borders, rules, timeline strip line (Score's --staff) */
  --ground:     #efe7d7;   /* notation-block background — a second warm tone
                              (Score's --ground; used only inside .score .notation) */
  --persimmon:  #bf4a20;   /* the accent — same as --id-accent, aliased (Score's --signal) */

  /* Score-frame-specific: when the Corpus Frame wraps a Score-rendered page,
     the Score's own CSS scopes into that region. These variables are read by
     shell.css to compose the two palettes without collision at the seam.
     Under the seam is now byte-invisible — same palette on both
     sides — so this holds as-is. */

  --corpus-frame-bg:    var(--paper);
  --corpus-frame-edge:  var(--hairline);

  /* ═══ 3. Typography — the size scale, the roles, the rhythm ═══
     Fraunces for display + wordmark; Spectral for body prose; Spline Sans
     Mono for labels, code, machine-facing surfaces. All three; the size ladder is small and deliberate — no ad-hoc pixel sizes
     per Room. */

  --font-display:  "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:     "Spectral", "Iowan Old Style", "Palatino Linotype",
                   Palatino, Georgia, serif;
  --font-mono:     "Spline Sans Mono", ui-monospace, "SF Mono",
                   "Cascadia Code", "Fira Mono", Menlo, Consolas, monospace;

  /* Size scale (px) */
  --size-display:      44px;   /* porch headline, room headline */
  --size-display-lg:   56px;   /* porch headline at ≥1000px */
  --size-headline:     28px;   /* in-room section headline */
  --size-headline-lg:  32px;   /* section headline at ≥1000px */
  --size-lead:         22px;   /* room's first paragraph */
  --size-lead-lg:      24px;   /* lead at ≥1000px */
  --size-body:         18px;   /* body prose */
  --size-label:        12px;   /* eyebrow, metadata, machine-facing */
  --size-code:         14px;   /* raw text, code blocks */

  /* Weight scale */
  --weight-display:    400;    /* Fraunces display, calm not heavy */
  --weight-headline:   500;    /* section headline, slightly firmer */
  --weight-body:       400;    /* body prose */
  --weight-emphasis:   600;    /* rare — only for a Signal or an active nav */

  /* Line-heights */
  --lh-display:  1.08;
  --lh-headline: 1.15;
  --lh-lead:     1.35;
  --lh-body:     1.55;
  --lh-label:    1.40;
  --lh-code:     1.60;

  /* Letter-spacing */
  --track-label: 0.08em;   /* uppercase Spline Mono labels */
  --track-display: -0.005em; /* Fraunces display, subtle tightening */

  /* ═══ 4. Rhythm — the vertical spacing unit ═══
     Every block sits at a multiple of one line-height. The result is a calm
     rhythm the eye follows across long-scroll corridors without effort.
     (Per: "no ad-hoc pixel spacing.") */

  --rhythm:      1.55rem;         /* = body line-height */
  --gap-tight:   calc(var(--rhythm) * 0.5);
  --gap:         var(--rhythm);
  --gap-wide:    calc(var(--rhythm) * 2);
  --gap-section: calc(var(--rhythm) * 3);

  /* ═══ 5. Layout constants ( space declarations) ═══
     The site's alphabet: each block carries an explicit space + overflow
     policy. These constants live here so shell.css reads from them, not
     from magic numbers in component selectors. */

  --width-room:         720px;   /* Room max-width */
  --width-corridor:     780px;   /* Corridor max-width */
  --width-porch:        720px;   /* Porch max-width */
  --width-discoveries:  900px;   /* Discoveries Scroll — wider than default */
  --marker-rail:        200px;   /* Corridor Marker rail at ≥1000px */
  --frame-topbar:       64px;    /* Frame's fixed top bar height */

  /* ═══ 6. Border radius + hairline weights ═══
     Soft-not-round. The site's chrome is quiet, geometric, unhurried. */

  --radius-artifact:  4px;       /* image + card corners */
  --radius-badge:     6px;       /* Honest Badge */
  --stroke-hairline:  1px;
  --stroke-rule:      2px;       /* section rule; used sparingly */

  /* ═══ 7. Motion — minimal, load-bearing only ═══
     Per: no parallax, no fade-ins, no scroll-linked animations.
     The site's tone is unhurried; motion that decorates violates it. */

  --motion-nav:     100ms;   /* nav link color shift on hover */
  --motion-disc:    150ms;   /* timeline disc scale on hover */
  --ease:           cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ═══ 8. Responsive breakpoints — three, not five ═══
   Comfort ≥ 1000px : full site
   Reading 700–999px: Marker folds to bar; discoveries stay 2-col ≥ 900
   Phone   < 700px  : single-column throughout                          */

@media (min-width: 1000px) {
  :root {
    --size-display:  var(--size-display-lg);
    --size-headline: var(--size-headline-lg);
    --size-lead:     var(--size-lead-lg);
  }
}