/* ============================================================
   OpenProse · _tokens.css — canonical design tokens
   ----------------------------------------------------------------
   Created 2026-05-26 by JH (consolidation of 30 un-archived pages
   into the rigorous styleguide template).

   This file is the SOURCE OF TRUTH for:
     · palette tokens (--paper, --ink, --teal, --amber, …)
     · cap-height normalisation (--cap-norm, --ex-norm)
     · spacing scale (--space-*)
     · type scale (--fs-*)
     · transitions and motion (--t-*)
     · shadows and surfaces (--shadow-*, --paper-elev)

   It does NOT define font-family — that is _pairings.css.

   Palettes are scoped via body[data-palette="…"] so the consuming
   page just sets one attribute. The :root block is the default
   (LIGHT-warm-teal) so a page without data-palette still works.

   Seven canonical palettes (per user 2026-05-26 review):
     1. light-cool-default     (β tufte default — paper #fffff8)
     2. light-warm-teal        (canonical — paper #f5f0e8 + teal+amber)
     3. light-warm-rust        (η/λ/μ — paper #f7f1e3 + rust)
     4. light-manuscript-cream (γ — paper #f5efe1)
     5. light-saas-neutral     (ζ — paper #f9f9f7)
     6. dark-machine           (δ terminal — paper #0e0e10 + amber)
     7. dark-livingdoc         (θ terminal — paper #0f0c0a + warn/good)
   ============================================================ */


/* ============================================================
   GLOBAL TOKENS (apply regardless of palette)
   ============================================================ */
:root {
  /* ---- Cap-height normalisation (typography-pairings.html) ----
     Browser: Chrome 127+, Safari 17+, Firefox 118+ — shipped 2023-24.
     Apply via `font-size-adjust: cap-height 0.70;` per face to make
     Kecal and any mono share a top edge across all pairings. */
  --cap-norm: 0.70;
  --ex-norm:  0.50;

  /* ---- Spacing scale (9 rungs, β styleguide §4) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;

  /* ---- Type scale (6 stops, β styleguide §3) ---- */
  --fs-caption: 0.62rem;
  --fs-label:   0.72rem;
  --fs-small:   0.82rem;
  --fs-body:    1rem;
  --fs-h3:      1.25rem;
  --fs-h2:      1.75rem;
  --fs-h1:      2.5rem;
  --fs-display: 4rem;
  --fs-mono:    0.92em;     /* mono inline runs slightly smaller than body */

  /* ---- Containers (β styleguide §5) ---- */
  --measure:    66ch;        /* reading column */
  --measure-ch: 66ch;
  --wide:       1180px;      /* page max-width */

  /* ---- Motion ---- */
  --t-fast: 120ms;
  --t-med:  240ms;
  --t-slow: 480ms;

  /* ---- Surface elevation (canonical light-paper shadows) ---- */
  --shadow:    0 1px 2px rgba(42,37,32,0.06), 0 1px 1px rgba(42,37,32,0.04);
  --shadow-md: 0 4px 12px rgba(42,37,32,0.08), 0 2px 4px rgba(42,37,32,0.04);
  --shadow-lg: 0 12px 32px rgba(42,37,32,0.10), 0 4px 12px rgba(42,37,32,0.06);

  /* ---- Radii ---- */
  --radius: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
}


/* ============================================================
   PALETTE 1 · LIGHT-cool-default   (β tufte default)
   paper #fffff8 over ink #111 — newsprint, no chrome accent
   ============================================================ */
body[data-palette="light-cool-default"], body:not([data-palette]) {
  /* fallback path: if no palette declared, use warm-teal (see below).
     Specific opt-in to cool-default must set data-palette explicitly. */
}
body[data-palette="light-cool-default"] {
  --paper:      #fffff8;
  --paper-warm: #fcfaef;
  --paper-lt:   #ffffff;
  --paper-deep: #f4f1e0;
  --paper-elev: #fffff8;
  --paper-cream: #fbf7ef;

  --ink:        #111111;
  --ink-2:      #333333;
  --ink-3:      #666666;
  --ink-4:      #aaaaaa;
  --ink-5:      #d4d4d4;

  --rule:       #d8d2c4;
  --rule-mid:   #e6e0d2;

  /* Accents — sparingly used */
  --red:        #c0392b;
  --red-deep:   #8e2b20;
  --red-muted:  #d4604f;
  --red-tint:   rgba(192,57,43,0.10);

  --accent:     'Cormorant Garamond', 'Cormorant', Georgia, serif;

  --hl:         transparent;
  --hl-hot:     transparent;

  --warn:       #c0392b;
  --good:       #14803e;
}


/* ============================================================
   PALETTE 2 · LIGHT-warm-teal   (CANONICAL DEFAULT)
   paper #f5f0e8 + teal #3a7a6a + amber #c49a5c + red #c0392b
   ============================================================ */
:root,
body[data-palette="light-warm-teal"] {
  --paper:        #f5f0e8;
  --paper-warm:   #f0e8d8;
  --paper-cream:  #fbf7ef;
  --paper-lt:     #fbf7ef;
  --paper-deep:   #1a1108;
  --paper-elev:   #f9f5ed;

  --ink:          #2a2520;
  --ink-2:        rgba(42,37,32,0.78);
  --ink-3:        rgba(42,37,32,0.55);
  --ink-4:        rgba(42,37,32,0.32);
  --ink-5:        rgba(42,37,32,0.18);

  --rule:         rgba(42,37,32,0.14);
  --rule-mid:     rgba(42,37,32,0.06);

  --amber:        #c49a5c;
  --amber-deep:   #a87f44;
  --amber-soft:   #d4aa6c;
  --amber-faint:  rgba(196,154,92,0.10);
  --amber-tint:   rgba(196,154,92,0.18);

  --teal:         #3a7a6a;
  --teal-deep:    #2e6456;
  --teal-soft:    #5ea08e;
  --teal-tint:    rgba(58,122,106,0.14);
  --teal-faint:   rgba(58,122,106,0.06);

  --red:          #c0392b;
  --red-deep:     #8e2b20;
  --red-muted:    #d4604f;
  --red-tint:     rgba(192,57,43,0.10);

  --accent:       'Kecal', system-ui, -apple-system, sans-serif;

  --hl:           transparent;
  --hl-hot:       transparent;

  --warn:         #b8442e;
  --good:         #4a8c44;
}


/* ============================================================
   PALETTE 3 · LIGHT-warm-rust   (η organism · μ bloom · ρ blackhole-light)
   paper #f7f1e3 + rust #a8552a (no teal)
   ============================================================ */
body[data-palette="light-warm-rust"] {
  --paper:        #f7f1e3;
  --paper-warm:   #f3ead4;
  --paper-lt:     #fbf6e9;
  --paper-deep:   #1a1108;
  --paper-elev:   #fbf7ef;
  --paper-cream:  #fbf6e9;

  --ink:          #221408;
  --ink-2:        #3a2614;
  --ink-3:        rgba(34,20,8,0.55);
  --ink-4:        rgba(34,20,8,0.32);
  --ink-5:        rgba(34,20,8,0.18);

  --rule:         rgba(34,20,8,0.16);
  --rule-mid:     rgba(34,20,8,0.08);

  --rust:         #a8552a;
  --rust-deep:    #8c4321;
  --rust-soft:    #c47045;
  --rust-faint:   rgba(168,85,42,0.10);
  --rust-tint:    rgba(168,85,42,0.18);

  /* For pages that expect teal vars, alias them to rust */
  --teal:         var(--rust);
  --teal-deep:    var(--rust-deep);
  --teal-tint:    var(--rust-tint);

  --amber:        #c47045;
  --amber-soft:   #d4855a;
  --amber-deep:   #8c4321;

  --red:          #c0392b;
  --red-deep:     #8e2b20;
  --red-muted:    #d4604f;

  --gold:         #e5b94a;
  --gold-deep:    #c49a32;
  --gold-soft:    #f5cf72;
  --gold-faint:   rgba(229,185,74,0.10);

  --accent:       'Kecal', system-ui, -apple-system, sans-serif;

  --warn:         #c0392b;
  --good:         #4a8c44;
}


/* ============================================================
   PALETTE 4 · LIGHT-manuscript-cream   (γ manuscript)
   paper #f5efe1 + amber accent #8c5e1c
   ============================================================ */
body[data-palette="light-manuscript-cream"] {
  --paper:        #f5efe1;
  --paper-warm:   #faf4e6;
  --paper-lt:     #fbf7ef;
  --paper-cream:  #fbf6e9;
  --paper-deep:   #1c140a;
  --paper-elev:   #fcf7e9;

  --ink:          #1c140a;
  --ink-2:        #3a2c18;
  --ink-3:        rgba(28,20,10,0.55);
  --ink-4:        rgba(28,20,10,0.32);
  --ink-5:        rgba(28,20,10,0.18);

  --rule:         #d8cca8;
  --rule-mid:     #e6dcc2;

  --amber:        #8c5e1c;
  --amber-deep:   #6c4516;
  --amber-soft:   #b8862e;
  --amber-faint:  rgba(140,94,28,0.10);

  --accent:       #8c5e1c;

  --red:          #b8442e;
  --red-deep:     #8e2b20;

  --warn:         #b8442e;
  --good:         #4a8c44;
}


/* ============================================================
   PALETTE 5 · LIGHT-saas-neutral   (ζ saas)
   paper #f9f9f7 + steel #2c5e7e (no warm tint)
   ============================================================ */
body[data-palette="light-saas-neutral"] {
  --paper:        #f9f9f7;
  --paper-warm:   #f3f1ec;
  --paper-lt:     #ffffff;
  --paper-deep:   #0a0a0a;
  --paper-elev:   #ffffff;
  --paper-cream:  #fcfcfa;

  --ink:          #1a1a1a;
  --ink-2:        #444444;
  --ink-3:        #777777;
  --ink-4:        #aaaaaa;
  --ink-5:        #d4d4d4;

  --rule:         rgba(26,26,26,0.10);
  --rule-mid:     rgba(26,26,26,0.05);

  --steel:        #2c5e7e;
  --steel-hover:  #244e6a;
  --steel-soft:   #4a7e9a;
  --steel-tint:   rgba(44,94,126,0.10);

  /* Alias teal → steel for cross-palette consistency */
  --teal:         var(--steel);
  --teal-deep:    var(--steel-hover);
  --teal-tint:    var(--steel-tint);

  --accent:       var(--steel);

  --red:          #c0392b;
  --red-deep:     #8e2b20;

  --warn:         #c0392b;
  --good:         #14803e;
}


/* ============================================================
   PALETTE 6 · DARK-machine   (δ machine · θ-adjacent)
   paper #0e0e10 + ink #e8e4dc + amber #d4a64f + good #6ee87a
   ============================================================ */
body[data-palette="dark-machine"] {
  --paper:        #0e0e10;
  --paper-warm:   #16161a;
  --paper-lt:     #1c1c20;
  --paper-deep:   #050507;
  --paper-elev:   #1a1a1e;

  --ink:          #e8e4dc;
  --ink-2:        #c8c4bc;
  --ink-3:        rgba(232,228,220,0.55);
  --ink-4:        rgba(232,228,220,0.32);
  --ink-5:        rgba(232,228,220,0.18);

  --rule:         rgba(232,228,220,0.10);
  --rule-mid:     rgba(232,228,220,0.06);

  --amber:        #d4a64f;
  --amber-deep:   #b8862e;
  --amber-soft:   #e0bf68;
  --amber-faint:  rgba(212,166,79,0.10);
  --amber-tint:   rgba(212,166,79,0.18);

  --warn:         #d4604f;
  --good:         #6ee87a;

  --red:          #c0392b;
  --red-deep:     #8e2b20;
  --red-muted:    #d4604f;

  --accent:       var(--amber);
}


/* ============================================================
   PALETTE 7 · DARK-livingdoc   (θ living-document)
   paper #0f0c0a + ink #f0e8d8 + warm warn #d49464
   ============================================================ */
body[data-palette="dark-livingdoc"] {
  --paper:        #0f0c0a;
  --paper-warm:   #1a1814;
  --paper-lt:     #221e18;
  --paper-deep:   #050402;
  --paper-elev:   #1c1814;

  --ink:          #f0e8d8;
  --ink-2:        #c8bfae;
  --ink-3:        rgba(240,232,216,0.55);
  --ink-4:        rgba(240,232,216,0.32);
  --ink-5:        rgba(240,232,216,0.18);

  --rule:         rgba(240,232,216,0.10);
  --rule-mid:     rgba(240,232,216,0.06);

  --warn:         #d49464;     /* warm amber-warn */
  --good:         #8fc28b;     /* soft sage-good */
  --ember:        #d49464;     /* alias used by θ-living-doc */

  --amber:        #d49464;
  --amber-deep:   #b87644;
  --amber-soft:   #e0a878;

  --accent:       var(--warn);

  --red:          #c0392b;
  --red-deep:     #8e2b20;
}


/* ============================================================
   ON-DARK MIRROR SCALE (used by .dark-tile classes inside light pages)
   Mirrors the warm-teal ink scale onto cream-on-dark.
   ============================================================ */
body[data-palette]:not([data-palette^="dark"]) {
  --on-dark:          #fbf7ef;
  --on-dark-2:        rgba(251,247,239,0.78);
  --on-dark-3:        rgba(251,247,239,0.55);
  --on-dark-4:        rgba(251,247,239,0.32);
  --on-dark-5:        rgba(251,247,239,0.18);
  --on-dark-rule:     rgba(251,247,239,0.14);
  --on-dark-rule-mid: rgba(251,247,239,0.06);
}


/* ============================================================
   GLOBAL APPLICATION — make these tokens actually take effect
   on body and html so a page without per-page background CSS
   still renders correctly.
   ============================================================ */
html, body {
  background: var(--paper);
  color: var(--ink);
}