/* cards-themes.css — CSS custom property overrides per stack theme.
   Each body.stack-theme-{key} block remaps --xdr-* tokens onto the
   --stack-* variables consumed by <hypercard-viewport> and by
   cards-base.css block styles.

   Site-wide tokens defined in theme/static_src/src/xander.css. No raw
   color values here. Where blends are needed (overlays, surrounds),
   color-mix() against an --xdr-* token keeps the trace.

   The 5 themes are tuned to stay visually distinct: light/sans (classic),
   paper/sage/serif (xander), paper/tan/mono (zine), warm tan/blood/serif
   (wec), dark/tan/serif (myst). */

/* ── Classic (paper-and-ink, sans) ──────────────────────────────── */
body.stack-theme-classic,
.stack-theme-classic {
  --stack-card-bg:     var(--xdr-bone);
  --stack-card-fg:     var(--xdr-ink);
  --stack-card-border: var(--xdr-ink);
  --stack-chrome-bg:   var(--xdr-paper-2);
  --stack-accent:      var(--xdr-ink);
  --stack-card-font:   var(--xdr-sans);
}

/* ── Xander (workshop default — paper, sage chrome, serif) ──────── */
body.stack-theme-xander,
.stack-theme-xander {
  --stack-card-bg:     var(--xdr-paper);
  --stack-card-fg:     var(--xdr-ink);
  --stack-card-border: var(--xdr-ink);
  --stack-chrome-bg:   var(--xdr-bone);
  --stack-accent:      var(--xdr-rust);
  --stack-card-font:   var(--xdr-serif);
}

/* ── Zine (xerox punk — paper, tan chrome, mono) ────────────────── */
body.stack-theme-zine,
.stack-theme-zine {
  --stack-card-bg:     var(--xdr-paper);
  --stack-card-fg:     var(--xdr-ink);
  --stack-card-border: var(--xdr-ink);
  --stack-chrome-bg:   var(--xdr-tan);
  --stack-accent:      var(--xdr-rust);
  --stack-card-font:   var(--xdr-mono);
}

/* ── Whole Earth Catalog (warm tan, blood accent, serif) ────────── */
body.stack-theme-wec,
.stack-theme-wec {
  --stack-card-bg:     var(--xdr-paper);
  --stack-card-fg:     var(--xdr-ink);
  --stack-card-border: var(--xdr-ink-2);
  --stack-chrome-bg:   var(--xdr-tan-2);
  --stack-accent:      var(--xdr-blood);
  --stack-card-font:   var(--xdr-serif);
}

/* ── Myst (immersive dark — ink bg, tan text, serif) ────────────── */
body.stack-theme-myst,
.stack-theme-myst {
  --stack-card-bg:     var(--xdr-ink);
  --stack-card-fg:     var(--xdr-tan);
  --stack-card-border: var(--xdr-tan-2);
  --stack-chrome-bg:   var(--xdr-ink-2);
  --stack-accent:      var(--xdr-tan-2);
  --stack-card-font:   var(--xdr-serif);
}

/* ── Per-theme page surround ─────────────────────────────────────── */
/* Body backgrounds active on card pages. */

body.stack-theme-classic {
  background-color: var(--xdr-paper-2) !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    color-mix(in oklab, var(--xdr-ink) 3%, transparent) 8px 16px
  );
}

body.stack-theme-xander {
  background-color: color-mix(in oklab, var(--xdr-sage) 30%, var(--xdr-paper)) !important;
}

body.stack-theme-zine {
  background-color: var(--xdr-paper-2) !important;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 24px,
    color-mix(in oklab, var(--xdr-ink) 6%, transparent) 24px 25px
  );
}

body.stack-theme-wec {
  background-color: var(--xdr-tan-2) !important;
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--xdr-blood) 8%, transparent) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--xdr-blood) 8%, transparent) 0, transparent 40%);
}

body.stack-theme-myst {
  background-color: var(--xdr-ink) !important;
  background-image: radial-gradient(ellipse at top, var(--xdr-ink-2) 0%, var(--xdr-ink) 60%);
}

/* ── Per-theme polish ───────────────────────────────────────────── */

/* Zine: margin notes get a hand-written feel */
body.stack-theme-zine .margin-note {
  font-family: var(--xdr-mono);
  border: 1px dashed var(--xdr-ink);
  background: transparent;
}

/* Myst: soften nav chrome for immersion */
body.stack-theme-myst .card-link--button {
  background: var(--xdr-ink-2);
  color: var(--xdr-tan);
  border-color: var(--xdr-tan-2);
}
body.stack-theme-myst .card-link--button:hover {
  background: var(--xdr-tan-2);
  color: var(--xdr-ink);
}

/* WEC: catalog entries get a warm border treatment */
body.stack-theme-wec .catalog-entry {
  border-color: var(--xdr-ink-2);
  background: var(--xdr-bone);
}

/* Xander: nav buttons pick up the sage accent */
body.stack-theme-xander .card-link--button {
  background: var(--xdr-sage-2);
  color: var(--xdr-paper);
  border-color: var(--xdr-ink);
}
body.stack-theme-xander .card-link--button:hover {
  background: var(--xdr-ink);
  color: var(--xdr-paper);
}

/* ── Per-theme backdrop overlay tuning ──────────────────────────── */
/* Cards default to a 0.25 darken from cards-base.css; override per theme. */

body.stack-theme-myst .stack-backdrop-overlay {
  background-color: color-mix(in oklab, var(--xdr-ink) 55%, transparent);
}

body.stack-theme-classic .stack-backdrop-overlay {
  background-color: color-mix(in oklab, var(--xdr-bone) 35%, transparent);
}

body.stack-theme-xander .stack-backdrop-overlay {
  background-color: color-mix(in oklab, var(--xdr-sage) 55%, transparent);
}