/* ============================================================
   THEMES + scroll-prose
   Palettes swap via :root[data-theme="…"]. Every theme keeps
   contrast within WCAG AA for body text and large UI.
   The design uses --ink / --paper semantically (fg / bg), so a
   dark theme inverts cleanly; the three tokens below patch the
   few spots where the chartreuse marker or the accent are used
   as *foreground* over an inverting surface.
   ============================================================ */

/* ---------- FOREST (default · light) ---------- */
:root[data-theme="forest"] {
  --paper:    #EEF0EA;
  --paper-2:  #E4E7DD;
  --card:     #F8F9F3;
  --ink:      #16201A;
  --ink-soft: #4F584F;   /* 5.6:1 on paper */
  --ink-faint:#828B80;
  --line:     #D6DACE;
  --line-2:   #C2C7B6;

  --tang:     #1C7A4A;   /* forest green accent */
  --tang-ink: #156238;   /* 5.0:1 text-on-paper variant */
  --marker:   #D9EA4B;   /* chartreuse highlighter (dark text over it) */
  --cobalt:   #1F3BD6;
  --ok:       #1C8A50;

  --on-marker: #182218;  /* text/elements that sit on the chartreuse */
  --marker-fg: var(--marker);  /* marker-as-text reads on dark inverted chips */
  --on-accent: #FFFFFF;  /* text over the accent fill */
}

/* ---------- CREAM (refined original · light) ---------- */
:root[data-theme="cream"] {
  --paper:    #F3EEE3;
  --paper-2:  #ECE5D6;
  --card:     #FBF8F1;
  --ink:      #1C1815;
  --ink-soft: #645A50;   /* darkened from #6A6056 for AA */
  --ink-faint:#9A8F80;
  --line:     #DBD3C4;
  --line-2:   #C9BFAC;

  --tang:     #E5430F;   /* deepened tangerine */
  --tang-ink: #B6350A;   /* 4.8:1 text-on-paper variant */
  --marker:   #DCFB4B;
  --cobalt:   #1F2BFF;
  --ok:       #1C9C58;

  --on-marker: #1C1815;
  --marker-fg: var(--marker);
  --on-accent: #FFFFFF;
}

/* ---------- NOIR (warm · dark) ---------- */
:root[data-theme="noir"] {
  --paper:    #15130E;   /* warm near-black (background) */
  --paper-2:  #211E16;
  --card:     #221F17;
  --ink:      #F2ECE0;   /* warm cream (foreground) */
  --ink-soft: #B3AA9A;   /* 8.7:1 on paper */
  --ink-faint:#8C8474;   /* ~4.8:1 — decorative mono */
  --line:     #322E24;
  --line-2:   #423D30;

  --tang:     #FF6A3C;   /* warm orange accent */
  --tang-ink: #FF8A5E;   /* bright orange, ~7:1 text-on-paper */
  --marker:   #C9ED44;
  --cobalt:   #5A74FF;
  --ok:       #43C07A;

  --on-marker: #18160F;  /* dark text on the chartreuse highlight */
  --marker-fg: #5E7310;  /* dark olive: marker-as-text on inverted (light) chips */
  --on-accent: #1A140E;  /* dark text over the bright orange fill */
}

/* a hair more grain on the dark theme so flats don't band */
:root[data-theme="noir"] body::before { opacity: 0.7; }

/* Freeze transitions for one frame on theme swap (avoids Chromium pinning
   var()-based background/color transitions to the previous palette). */
html.theme-anim-off,
html.theme-anim-off *,
html.theme-anim-off *::before,
html.theme-anim-off *::after { transition: none !important; }

/* ============================================================
   SCROLL-PROSE — words start faint, brighten as they pass
   ============================================================ */
.sp { /* container, no visual change */ }
.sp-w {
  opacity: 0.16;
  transition: opacity 140ms linear;
  will-change: opacity;
}
/* keep flat outputs legible */
@media print { .sp-w { opacity: 1 !important; transition: none; } }
@media (prefers-reduced-motion: reduce) { .sp-w { opacity: 1 !important; transition: none; } }