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

/* ── Classic (HyperCard B&W) ────────────────────────────────────── */
body.stack-theme-classic,
.stack-theme-classic {
  --stack-card-bg: #ffffff;
  --stack-card-fg: #000000;
  --stack-card-border: #000000;
  --stack-chrome-bg: #dcdcdc;
  --stack-accent: #000000;
  --stack-card-font: 'Chicago', 'Geneva', system-ui, sans-serif;
}

/* ── Xander (sage + navy, Art Deco) ─────────────────────────────── */
/* TODO(clarify): No existing CSS tokens for sage/navy found in codebase.
   Values defined locally per open question §5.5 default.
   Reconcile with site-wide tokens if they are introduced later. */
body.stack-theme-xander,
.stack-theme-xander {
  --stack-card-bg: #f4f1e8;
  --stack-card-fg: #1a2a44;
  --stack-card-border: #1a2a44;
  --stack-chrome-bg: #8a9a7b;
  --stack-accent: #8a9a7b;
  --stack-card-font: 'Georgia', 'Palatino', serif;
}

/* ── Zine (dense, marginalia) ───────────────────────────────────── */
body.stack-theme-zine,
.stack-theme-zine {
  --stack-card-bg: #f7f3e8;
  --stack-card-fg: #1a1a1a;
  --stack-card-border: #1a1a1a;
  --stack-chrome-bg: #c8b99c;
  --stack-accent: #7a1a1a;
  --stack-card-font: 'Courier New', 'Courier', monospace;
}

/* ── Whole Earth Catalog (warm, catalog) ────────────────────────── */
body.stack-theme-wec,
.stack-theme-wec {
  --stack-card-bg: #ede4d3;
  --stack-card-fg: #2a1a0a;
  --stack-card-border: #5a3a20;
  --stack-chrome-bg: #c9a876;
  --stack-accent: #7a4a1a;
  --stack-card-font: 'Georgia', 'Times New Roman', serif;
}

/* ── Myst (immersive, dark) ─────────────────────────────────────── */
body.stack-theme-myst,
.stack-theme-myst {
  --stack-card-bg: #161613;
  --stack-card-fg: #d8d2c0;
  --stack-card-border: #d8d2c0;
  --stack-chrome-bg: #2a2824;
  --stack-accent: #a89a70;
  --stack-card-font: 'Palatino', 'Georgia', serif;
}

/* ── Per-theme page surround ─────────────────────────────────── */
/* Backgrounds applied to the body when a card page is active.
   These override the site default (#ccd7ff lavender from styles.css)
   so cards sit on a theme-complementary surround. */

body.stack-theme-classic {
  background-color: #d0d0d0 !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    rgba(0, 0, 0, 0.03) 8px 16px
  );
}

body.stack-theme-xander {
  background-color: #c6d3cc !important;
  /* Sage-tinted surround echoes the site's Xander illustration palette */
}

body.stack-theme-zine {
  background-color: #e8ddc4 !important;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 24px,
    rgba(26, 26, 26, 0.06) 24px 25px
  );
  /* Ruled paper */
}

body.stack-theme-wec {
  background-color: #d9c89e !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(90, 58, 32, 0.08) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(90, 58, 32, 0.08) 0, transparent 40%);
  /* Warm catalog paper */
}

body.stack-theme-myst {
  background-color: #0b0b09 !important;
  background-image:
    radial-gradient(ellipse at top, #1a1a15 0%, #0b0b09 60%);
  /* Immersive dark */
}

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

/* Zine: margin notes get a hand-written feel */
body.stack-theme-zine .margin-note {
  font-family: 'Courier New', monospace;
  border: 1px dashed #1a1a1a;
  background: transparent;
}

/* Myst: soften nav chrome for immersion */
body.stack-theme-myst .card-link--button {
  background: #2a2824;
  color: #d8d2c0;
  border-color: #d8d2c0;
}
body.stack-theme-myst .card-link--button:hover {
  background: #a89a70;
  color: #161613;
}

/* WEC: catalog entries get a warm border treatment */
body.stack-theme-wec .catalog-entry {
  border-color: #5a3a20;
  background: #f5ecd8;
}

/* Xander: nav buttons pick up the sage accent */
body.stack-theme-xander .card-link--button {
  background: #8a9a7b;
  color: #f4f1e8;
  border-color: #1a2a44;
}
body.stack-theme-xander .card-link--button:hover {
  background: #1a2a44;
  color: #f4f1e8;
}

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

body.stack-theme-myst .stack-backdrop-overlay {
  background-color: rgba(0, 0, 0, 0.55);
}

body.stack-theme-classic .stack-backdrop-overlay {
  background-color: rgba(255, 255, 255, 0.35);
}

body.stack-theme-xander .stack-backdrop-overlay {
  background-color: rgba(198, 211, 204, 0.35);
}