/* /public/css/parchment.css
   The parchment & ink surface kit — the look of the 2D app layer.
   Color/font source of truth: memory/companion/Art-Style.md — edit there first, this file holds the working values.
   Aged paper, sepia ink, Crimson Pro for display type. The home screen is the
   treasure map of Tenari (tenari-map.js); All Apps, Settings + its sub-menus,
   and the Reactor sit on the same sheet.

   HOW TO USE IT: load it LAST — after app-theme.css AND after settings-page.css.
   That's the whole conversion. This file remaps app-theme's token names onto the
   parchment palette, so settings-page.css (and anything else that colours itself
   from tokens) follows with no edit of its own.

     <link rel="stylesheet" href="/css/app-theme.css">
     <link rel="stylesheet" href="/css/settings-page.css">
     <link rel="stylesheet" href="/css/parchment.css">   <-- LAST

   Order matters, and not only for the tokens: the "things tokens can't reach"
   block at the foot of this file re-inks a couple of rules settings-page.css
   hardcodes (the select chevron). Those are plain element selectors, so they only
   win if this file is parsed after it.

   Why a separate file instead of retokening app-theme.css: 53 pages load
   app-theme (games, memory, canvas, fitness, signup, dev-mainframe...). Flipping
   its values would silently reskin all of them. This is opt-in.

   Theme-agnostic ON PURPOSE. Paper is paper — it overrides :root, [data-theme=dark]
   and [data-theme=light] alike, so a page looks the same whatever appearance-apply.js
   wrote. Pages that load this file do not need a theme toggle.

   Palette source: public/css/scribble.css (:19-37) — Scribble proved this exact
   set as a workshop/parchment theme. Kept byte-identical so the two can't drift;
   the follow-up is scribble.css @import-ing this file.

   Notes: `public/memory/index.html` (the tree lobby) currently inlines this same
   palette — it should be migrated onto this file. */

/* ── PALETTE ────────────────────────────────────────────────────────────────
   Lifted verbatim from scribble.css. Do not fork these values. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --paper:      #f4ecdb;              /* page base — parchment */
  --surface:    #fffdf5;              /* cards / inputs — bright paper */
  --surface-2:  #fbf3e0;              /* insets / hovers */
  --wood:       #8a6a43;              /* oak */
  --wood-deep:  #5b4126;              /* walnut — accents / borders */
  --ink:        #2a2118;              /* primary text */
  --ink-soft:   #6b5d4a;              /* secondary text */
  --ink-dim:    rgba(42, 33, 24, .45);
  --amber:      #c8892f;              /* lamp glow */
  --line:       rgba(91, 65, 38, .18);
  --line-strong:rgba(91, 65, 38, .32);

  /* ── BRIDGE — app-theme.css token names, repainted in the parchment palette.
     This is what makes settings-page.css work unchanged. */
  --bg:            var(--paper);
  --panel:         var(--surface);
  --panel-solid:   var(--surface);
  --panel-hover:   var(--surface-2);
  --border:        var(--line);
  --border-strong: var(--line-strong);

  --text:      var(--ink);
  --text-body: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim:  var(--ink-dim);

  --accent:     var(--wood-deep);
  --accent-dim: rgba(91, 65, 38, .12);
  --accent-fg:  #fff8ec;              /* text/icon on accent fills */
  --danger:     #b4452f;
  --warn:       #b3781f;
  --success:    #4f7a3f;

  /* Cards are paper on paper: a hair brighter than the page, a soft drop, and a
     top highlight standing in for the sheet's lifted edge. No gloss gradient —
     paper doesn't gloss. */
  --card-bg-top: var(--surface);
  --card-bg-bot: var(--surface-2);
  --card-shadow: 0 6px 18px rgba(91, 65, 38, .14), inset 0 1px 0 rgba(255, 255, 255, .55);

  /* Control / field fills. app-theme.css washes these in WHITE over near-black;
     on paper a lighter-than-paper smudge reads as a smear, so they invert to a
     wash of INK over the sheet. (Tokens defined in app-theme.css.) */
  --control-bg:       rgba(91, 65, 38, .07);
  --control-bg-hover: rgba(91, 65, 38, .14);
  --btn-bg-hover:     rgba(91, 65, 38, .11);
  --field-bg:         rgba(91, 65, 38, .05);
  --field-bg-focus:   rgba(91, 65, 38, .09);
  --track-bg:         rgba(91, 65, 38, .16);
  --pill-bg:          rgba(91, 65, 38, .05);
  --knob:             var(--surface);   /* the knob is a paper disc, both states */
  --knob-on:          #fff8ec;
  --code-bg:          rgba(91, 65, 38, .08);

  /* The shared corner back-chevron (js/ce-back-button.js) defaults to a mint glow, which on paper
     reads as a smudge of radioactive ink. It's already themeable — so theme it. Ink, no glow. */
  --ce-back:      var(--ink);
  --ce-back-glow: rgba(91, 65, 38, .28);
}

/* ── THE MAP'S COLOURS ──────────────────────────────────────────────────────
   tenari-map.js reads these at mount instead of hardcoding hexes, so the sheet
   can change with the palette. Colour decisions live in CSS; the engine just
   draws. (--pf-mark is the one shout: quest pins and "you are here".) */
:root {
  --pf-paper:    #f4ecdb;   /* the sheet itself */
  --pf-ink:      #2a2118;   /* every line and letter */
  --pf-stain:    #a9834e;   /* the pulp blotch / discolouration */
  --pf-rust:     #8c5a2b;   /* foxing freckles */
  --pf-burn:     #6b3a12;   /* the scorched rim + water stains */
  --pf-vignette: #5b4126;   /* darkening where the sheet's been handled */
  --pf-band:     #4a3722;   /* the soft band under a realm border */
  --pf-mark:     #b4452f;   /* quest pins, "you are here" */
  --pf-mint:     #6ee7b7;   /* the roads' underlay + the Memory Tree's canopy */
}

/* ── NIGHT — the map by lamplight ───────────────────────────────────────────
   OPT-IN, and deliberately NOT hung off [data-theme]: that flag is app-wide
   across ~53 pages, so reusing it would drag All Apps and the Reactor into night
   too. Only Home and Settings add `.pf-night` (see js/pf-night.js), which is
   exactly the scope asked for.

   This is the same aged paper after dark, not a different app: warm dark pulp,
   cream ink, and MINT for anything live — the accent, the symbols, the roads,
   the tree. Palette lifted from scribble.css's lamplit set (already proven),
   with the accent swapped to Companion mint. */
:root.pf-night,
:root.pf-night[data-theme="light"],
:root.pf-night[data-theme="dark"] {
  --paper:      #15110b;
  --surface:    #211a11;
  --surface-2:  #2a2014;
  --wood:       #caa173;
  --wood-deep:  #9c7846;
  --ink:        #efe6d4;
  --ink-soft:   #c3b49a;
  --ink-dim:    rgba(239, 230, 212, .42);
  --amber:      #e0ad5c;
  --line:       rgba(202, 161, 115, .20);
  --line-strong:rgba(202, 161, 115, .34);

  /* Mint is the live colour after dark — it's the Companion palette, and it's the
     one thing Art-Style.md locks. */
  --accent:     #6ee7b7;
  --accent-dim: rgba(110, 231, 183, .14);
  --accent-fg:  #08170f;
  --danger:     #e0775c;
  --warn:       #e0ad5c;
  --success:    #6acf73;

  --card-bg-top: var(--surface);
  --card-bg-bot: var(--surface-2);
  --card-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Fills invert again: a wash of LIGHT over dark pulp. */
  --control-bg:       rgba(202, 161, 115, .09);
  --control-bg-hover: rgba(202, 161, 115, .17);
  --btn-bg-hover:     rgba(202, 161, 115, .13);
  --field-bg:         rgba(202, 161, 115, .07);
  --field-bg-focus:   rgba(202, 161, 115, .12);
  --track-bg:         rgba(202, 161, 115, .18);
  --pill-bg:          rgba(202, 161, 115, .07);
  --knob:             #2a2014;
  --knob-on:          #08170f;
  --code-bg:          rgba(0, 0, 0, .34);

  --ce-back:      var(--ink);
  --ce-back-glow: rgba(110, 231, 183, .32);

  /* the sheet, after dark */
  --pf-paper:    #15110b;
  --pf-ink:      #efe6d4;
  --pf-stain:    #4a3319;
  --pf-rust:     #4a2f16;
  --pf-burn:     #0a0603;
  --pf-vignette: #050300;
  --pf-band:     #caa173;
  --pf-mark:     #ff8a6b;
  --pf-mint:     #6ee7b7;
}

/* The chevron in a select is a data-URI and can't read a variable, so night needs
   its own. */
:root.pf-night select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='rgba(239,230,212,.62)' d='M6 9L1 4h10z'/></svg>");
}

/* Notices: dark tints, light text — the day values are unreadable on dark pulp. */
:root.pf-night .notice.info    { background: rgba(120, 160, 255, .10); border-color: rgba(120, 160, 255, .30); color: #a8c4ff; }
:root.pf-night .notice.warn    { background: rgba(224, 173, 92, .10);  border-color: rgba(224, 173, 92, .30);  color: #ffd28a; }
:root.pf-night .notice.danger  { background: rgba(224, 119, 92, .10);  border-color: rgba(224, 119, 92, .30);  color: #ffb3a0; }
:root.pf-night .notice.success { background: rgba(106, 207, 115, .10); border-color: rgba(106, 207, 115, .30); color: #a4e3aa; }

/* ── THE SHEET ──────────────────────────────────────────────────────────────
   Paint the paper on `html`/`body` directly, NOT on a ::before overlay. Two
   reasons: app-theme.css's body::before backdrop is a fixed layer at z-index:-1
   that would sit between the paper and the content, and — the load-bearing one —
   icons printed with `mix-blend-mode: multiply` must blend against the paper.
   An overlay in its own stacking context makes them blend against white instead,
   which is the difference between "printed on the map" and "sticker on the map". */
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }

/* app-theme.css's photo backdrop has no job here — the sheet is the background. */
body::before { background-image: none; }

/* Paper tooth — a cheap, always-on fibre grain. Two crossed hairline gradients;
   no filter, no repaint cost, safe on any device. The map (tenari-map.js) layers
   real feTurbulence fibre + foxing on top of this for the full treatment; flat
   surfaces like Settings only want the tooth. */
.pf-tooth {
  background-image:
    repeating-linear-gradient(90deg,  rgba(91,65,38,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,   rgba(91,65,38,.022) 0 1px, transparent 1px 4px);
  background-attachment: fixed;
}

/* ── TYPE ───────────────────────────────────────────────────────────────────
   Crimson Pro is the display/serif voice (titles, map labels, app names). Body
   copy and dense UI stay on the page's own sans — a settings list set entirely
   in a serif reads like a novel, not a control panel. Load the font per page:
   <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> */
.pf-display {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: .01em;
}
.pf-display-caps {
  font-family: "Crimson Pro", Georgia, serif;
  font-variant: small-caps;
  letter-spacing: .14em;
  color: var(--wood-deep);
}

/* A drawn rule — the hand-inked divider, heavier in the middle like a pen stroke
   that pressed harder mid-pull. */
.pf-rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ── THINGS TOKENS CAN'T REACH ──────────────────────────────────────────────
   The rest of settings-page.css colours itself from tokens and follows this kit
   for free. These few rules hardcode values chosen for a near-black panel, so
   they have to be re-stated. They win only because this file is loaded LAST —
   same specificity, later wins. Keep the geometry identical to the original. */

/* The select chevron is baked into a data-URI, and a data-URI can't read a CSS
   variable. Its fill is pale (for dark panels), i.e. invisible on paper. */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='rgba(42,33,24,.62)' d='M6 9L1 4h10z'/></svg>");
}

/* Notices ship PALE text (#a8c4ff, #a4e3aa, ...) — correct on near-black, but on
   paper it's pale-on-pale and effectively unreadable. Same hues, dark enough to
   read: the tint stays as the signal, the text carries the contrast. */
.notice.info    { background: rgba(43, 84, 184, .07);  border-color: rgba(43, 84, 184, .30);  color: #24468f; }
.notice.warn    { background: rgba(160, 104, 16, .08); border-color: rgba(160, 104, 16, .32); color: #8a5a0e; }
.notice.danger  { background: rgba(180, 69, 47, .07);  border-color: rgba(180, 69, 47, .32);  color: #a13a24; }
.notice.success { background: rgba(45, 100, 55, .07);  border-color: rgba(45, 100, 55, .30);  color: #2c5f36; }