/* =====================================================================
   Bespoke Woodcraft Studio — project-wide theme system
   10 themes (5 light, 5 dark). Each theme sets a CANONICAL palette; the
   alias layer at the bottom maps that palette onto BOTH token vocabularies
   used across the suite (cream/walnut/gold AND surface/accent/text), so a
   single theme recolours every page.
   `:root[data-theme]` (0,2,0) outranks each page's own `:root` (0,1,0),
   so themes win without touching per-page CSS.
   Soft/fill tokens (accent-soft, ok-soft, danger-soft, warn-soft) stay LIGHT
   in every theme — they're light chips/notices paired with dark text.
   ===================================================================== */

/* ---------- LIGHT ---------- */
:root[data-theme="studio-cream"]{
  --bg:#f4ede2; --surface:#fffdf8; --surface-2:#efe6d7; --surface-hi:#fff5e0;
  --text:#2a1f12; --text-muted:#6f5638; --text-faint:#7c6243;
  --line:#e7d9c2; --border:#ddcba9;
  --accent:#d4a056; --accent-deep:#a9762a; --accent-soft:#f0c98a;
  --header-bg:#2c1f12; --header-bg-2:#3e2c19; --header-bg-3:#1c130a; --header-line:#4a3520; --header-text:#f4ede2;
  --ok:#5b8a5b; --ok-soft:#e9f0e3; --warn:#b5862f; --warn-soft:#fbf0d6; --danger:#b0503c; --danger-soft:#f6e2dc;
  --shadow-c:0 1px 2px rgba(44,31,18,.06),0 8px 24px rgba(44,31,18,.08);
  --shadow-lg-c:0 2px 6px rgba(44,31,18,.10),0 18px 44px rgba(44,31,18,.16);
}
:root[data-theme="maple"]{
  --bg:#faf6ef; --surface:#ffffff; --surface-2:#f4ece0; --surface-hi:#fbf1dd;
  --text:#36302a; --text-muted:#6b6258; --text-faint:#7a7064;
  --line:#ece3d5; --border:#ddd2c0;
  --accent:#c98a3a; --accent-deep:#8f6120; --accent-soft:#f0d6a8;
  --header-bg:#4a3b2a; --header-bg-2:#5a4733; --header-bg-3:#3a2e20; --header-line:#6a5640; --header-text:#faf6ef;
  --ok:#5e8b57; --ok-soft:#e9f1e2; --warn:#bf8a2c; --warn-soft:#fbf0d6; --danger:#b35140; --danger-soft:#f6e3dd;
  --shadow-c:0 1px 2px rgba(54,40,26,.05),0 8px 24px rgba(54,40,26,.07);
  --shadow-lg-c:0 2px 6px rgba(54,40,26,.09),0 18px 44px rgba(54,40,26,.14);
}
:root[data-theme="birch-sage"]{
  --bg:#f3f4ef; --surface:#ffffff; --surface-2:#e9ece2; --surface-hi:#eef2e6;
  --text:#2b302a; --text-muted:#5f6a5a; --text-faint:#6b7568;
  --line:#e0e4d8; --border:#cdd4c2;
  --accent:#7d9b5b; --accent-deep:#577839; --accent-soft:#d8e4c2;
  --header-bg:#313a2e; --header-bg-2:#3d4838; --header-bg-3:#262e24; --header-line:#4a5641; --header-text:#f3f4ef;
  --ok:#5d8a52; --ok-soft:#e7f0e0; --warn:#b88a2e; --warn-soft:#f7f0da; --danger:#b05040; --danger-soft:#f1e0db;
  --shadow-c:0 1px 2px rgba(40,46,38,.05),0 8px 24px rgba(40,46,38,.08);
  --shadow-lg-c:0 2px 6px rgba(40,46,38,.09),0 18px 44px rgba(40,46,38,.14);
}
:root[data-theme="linen-ink"]{
  --bg:#f5f3ee; --surface:#ffffff; --surface-2:#ebe8e0; --surface-hi:#f0ede4;
  --text:#20242b; --text-muted:#565d66; --text-faint:#6a717a;
  --line:#e3e0d8; --border:#d2cfc5;
  --accent:#5c7c93; --accent-deep:#3f5a6b; --accent-soft:#cfe0eb;
  --header-bg:#20242b; --header-bg-2:#2c323b; --header-bg-3:#171a20; --header-line:#3a414b; --header-text:#f5f3ee;
  --ok:#5a8a6a; --ok-soft:#e4efe8; --warn:#b5862f; --warn-soft:#f7f0da; --danger:#b1503f; --danger-soft:#f3e1dc;
  --shadow-c:0 1px 2px rgba(32,36,43,.06),0 8px 24px rgba(32,36,43,.08);
  --shadow-lg-c:0 2px 6px rgba(32,36,43,.10),0 18px 44px rgba(32,36,43,.15);
}
:root[data-theme="porcelain-blue"]{
  --bg:#eef3f7; --surface:#ffffff; --surface-2:#e2eaf1; --surface-hi:#e8f1f8;
  --text:#23303a; --text-muted:#536571; --text-faint:#67768a;
  --line:#dbe5ec; --border:#c6d3de;
  --accent:#3f7ba8; --accent-deep:#2c5b82; --accent-soft:#cce0f0;
  --header-bg:#23303a; --header-bg-2:#2f3f4b; --header-bg-3:#19232c; --header-line:#3b4d59; --header-text:#eef3f7;
  --ok:#4f8a6a; --ok-soft:#e2efe8; --warn:#b5862f; --warn-soft:#f7f0da; --danger:#b1503f; --danger-soft:#f3e1dc;
  --shadow-c:0 1px 2px rgba(35,48,58,.07),0 8px 24px rgba(35,48,58,.09);
  --shadow-lg-c:0 2px 6px rgba(35,48,58,.11),0 18px 44px rgba(35,48,58,.16);
}

/* ---------- DARK ---------- (surfaces+text flip; soft/fill stay light) */
:root[data-theme="walnut-night"]{
  --bg:#1b130b; --surface:#261a0f; --surface-2:#2f2114; --surface-hi:#38281a;
  --text:#f0e6d6; --text-muted:#c4ad90; --text-faint:#9a866c;
  --line:#3a2a1a; --border:#4a3520;
  --accent:#d4a056; --accent-deep:#e6bd7c; --accent-soft:#f0c98a;
  --header-bg:#130c05; --header-bg-2:#221710; --header-bg-3:#0d0703; --header-line:#3a2a1a; --header-text:#f0e6d6;
  --ok:#7faf6f; --ok-soft:#e9f0e3; --warn:#d8a657; --warn-soft:#fbf0d6; --danger:#d77a64; --danger-soft:#f6e2dc;
  --shadow-c:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4);
  --shadow-lg-c:0 2px 6px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.55);
}
:root[data-theme="graphite"]{
  --bg:#17191c; --surface:#202327; --surface-2:#2a2e33; --surface-hi:#33383e;
  --text:#e9eaec; --text-muted:#a9b0b8; --text-faint:#7b828b;
  --line:#2e3338; --border:#3c424a;
  --accent:#d8a64a; --accent-deep:#ecc06a; --accent-soft:#f0d29a;
  --header-bg:#101214; --header-bg-2:#1d2024; --header-bg-3:#0a0c0e; --header-line:#2e3338; --header-text:#e9eaec;
  --ok:#6fae74; --ok-soft:#e6f0e2; --warn:#d8a657; --warn-soft:#f7eed5; --danger:#d77a64; --danger-soft:#f3e0db;
  --shadow-c:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg-c:0 2px 6px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.6);
}
:root[data-theme="espresso"]{
  --bg:#1e1611; --surface:#2a201a; --surface-2:#352a22; --surface-hi:#40332a;
  --text:#f1e9df; --text-muted:#c3b3a2; --text-faint:#988675;
  --line:#3a2e26; --border:#4c3d32;
  --accent:#d98c4e; --accent-deep:#ecaa72; --accent-soft:#f0cfa6;
  --header-bg:#160f0b; --header-bg-2:#251a14; --header-bg-3:#100a07; --header-line:#3a2e26; --header-text:#f1e9df;
  --ok:#7faf6f; --ok-soft:#e9f0e3; --warn:#d8a657; --warn-soft:#fbf0d6; --danger:#dd836b; --danger-soft:#f6e2dc;
  --shadow-c:0 1px 2px rgba(0,0,0,.32),0 8px 24px rgba(0,0,0,.42);
  --shadow-lg-c:0 2px 6px rgba(0,0,0,.42),0 18px 44px rgba(0,0,0,.58);
}
:root[data-theme="midnight-oak"]{
  --bg:#11161c; --surface:#1a212a; --surface-2:#232c37; --surface-hi:#2c3744;
  --text:#e6edf3; --text-muted:#a3b0bd; --text-faint:#74818f;
  --line:#283340; --border:#374453;
  --accent:#4aa3c0; --accent-deep:#74c4dd; --accent-soft:#bfe0ec;
  --header-bg:#0b1016; --header-bg-2:#161e27; --header-bg-3:#070b0f; --header-line:#283340; --header-text:#e6edf3;
  --ok:#5fb08a; --ok-soft:#e2efe8; --warn:#d8a657; --warn-soft:#f7eed5; --danger:#dd7a6a; --danger-soft:#f3e0db;
  --shadow-c:0 1px 2px rgba(0,0,0,.38),0 8px 24px rgba(0,0,0,.5);
  --shadow-lg-c:0 2px 6px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.62);
}
:root[data-theme="forest-dark"]{
  --bg:#121a14; --surface:#1a241c; --surface-2:#233026; --surface-hi:#2c3c30;
  --text:#e8efe6; --text-muted:#a6b6a4; --text-faint:#778777;
  --line:#28362b; --border:#374a3a;
  --accent:#7fb567; --accent-deep:#9fd086; --accent-soft:#d3e6c2;
  --header-bg:#0c130d; --header-bg-2:#17211a; --header-bg-3:#070c08; --header-line:#28362b; --header-text:#e8efe6;
  --ok:#7fb567; --ok-soft:#e7f0e0; --warn:#d2a857; --warn-soft:#f7eed5; --danger:#d77a64; --danger-soft:#f3e0db;
  --shadow-c:0 1px 2px rgba(0,0,0,.36),0 8px 24px rgba(0,0,0,.46);
  --shadow-lg-c:0 2px 6px rgba(0,0,0,.46),0 18px 44px rgba(0,0,0,.6);
}

/* ---------- ALIAS LAYER ----------
   Maps the canonical palette onto every legacy token name used across the
   suite. Applies to ANY themed page; resolves to the active theme's values. */
:root[data-theme]{
  /* surfaces / backgrounds */
  --cream:var(--bg); --paper:var(--bg); --cream-card:var(--surface);
  --cream-2:var(--surface-2); --surface2:var(--surface-2); --cream-hi:var(--surface-hi); --highlight:var(--surface-hi);
  /* text */
  --ink:var(--text); --ink-soft:var(--text-muted); --muted:var(--text-muted);
  --ink-faint:var(--text-faint); --faint:var(--text-faint);
  /* lines / borders */
  --cream-line:var(--line); --cream-line-2:var(--border);
  /* accent (gold / electric) */
  --gold:var(--accent); --gold-deep:var(--accent-deep); --gold-soft:var(--accent-soft);
  --electric:var(--accent); --electric-deep:var(--accent-deep); --electric-tint:var(--accent-soft);
  --accent-dim:var(--accent-deep);
  /* brand header / walnut family */
  --walnut:var(--header-bg); --walnut-2:var(--header-bg-2); --walnut-3:var(--header-bg-3);
  --walnut-deep:var(--header-bg); --walnut-line:var(--header-line); --walnut-tint:var(--header-bg-2);
  --wood-deep:var(--header-bg-3);
  /* semantic */
  --green:var(--ok); --green-bg:var(--ok-soft); --green-dim:var(--ok); --ok-bg:var(--ok-soft);
  --amber:var(--warn); --no:var(--danger); --red:var(--danger); --red-bg:var(--danger-soft);
  /* effects */
  --shadow:var(--shadow-c); --shadow-lg:var(--shadow-lg-c);
}
/* Smooth the flip; respect reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  :root[data-theme] body{ transition: background-color .25s ease, color .25s ease; }
}