/* Alternate studio palettes.
 *
 * Only token VALUES change. Every selector in studio.css reads the token
 * layer — nothing bypasses it — so a palette swap is a token swap, and a
 * component can never be left behind in the wrong colour.
 *
 * Themes key off [data-studio-resolved], NOT [data-studio-theme]. The app
 * resolves the user's choice ("auto" -> dark or landing) and stamps the
 * result. That means the dark palette is written ONCE. An earlier version
 * defined dark twice, once for the explicit choice and once inside a
 * prefers-color-scheme block, and the two copies drifted: "follow system"
 * left buttons, inputs and score cells light. One source, no drift.
 *
 * Disposition state is shape-encoded in the base sheet, so it stays legible
 * in every palette and without colour.
 *
 * The three canonical reports are print artifacts rendered by
 * report-styles.js under body.report-* classes. No palette here touches them.
 */

/* ── LANDING (default) ────────────────────────────────────────────────────
   Inherited from cmappilot.com per D-05. Tokens live in studio.css.        */

/* ── ARCHIVAL ─────────────────────────────────────────────────────────────
   Warm bone paper, ink, clay. Reads as a working document rather than a
   dashboard — which matches what the product calls its own output,
   "consultant workpaper" — and is easier than white over a long session.   */
:root[data-studio-resolved="archival"] {
  --ink: #23201c; --navy: #3f3226; --blue: #6b5540; --muted: #6f6659;
  --line: #e0d8cb; --paper: #fffdf8; --soft: #f7f2e8;
  --page: #faf6ee; --control: #fffdf8; --control-line: #d8cdb9;
  --clay: #9c5a3c; --clay-soft: #f6e9e1; --clay-ink: #7d4229;
  --gold: #9a7318; --gold-soft: #f8f0d9; --gold-ink: #7a5a0d; --gold-text: #4d3a08;
  --green: #3d6146; --green-soft: #ecf2ec; --green-ink: #2f4a37;
  --red: #9d4038; --red-soft: #f7e9e6; --red-ink: #77332c;
  --navy-soft: #f2ece1; --navy-ink: #4a3b2c;
  --on-accent: #fffdf8; --on-accent-dim: #ded2c0; --on-accent-weak: #edc9b4;
}
:root[data-studio-resolved="archival"] .artifact > header,
:root[data-studio-resolved="archival"] .hero {
  background: linear-gradient(125deg, #f7f2e8, #fffdf8 55%);
}

/* ── SLATE ────────────────────────────────────────────────────────────────
   Neutral greys, one accent. Least visual noise per screen — the choice if
   the ledger tables start to feel busy.                                    */
:root[data-studio-resolved="slate"] {
  --ink: #1c2126; --navy: #2b3843; --blue: #4a6373; --muted: #5f6b74;
  --line: #dcdfe2; --paper: #fff; --soft: #f3f5f6;
  --page: #fafbfb; --control: #fff; --control-line: #ccd2d6;
  --clay: #8f5a48; --clay-soft: #f4ebe8; --clay-ink: #7a4636;
  --gold: #8a6a24; --gold-soft: #f5f1e4; --gold-ink: #6f5417; --gold-text: #4a3a0f;
  --green: #2f6250; --green-soft: #eef3f1; --green-ink: #274f41;
  --red: #a04a44; --red-soft: #f7ecec; --red-ink: #7a3833;
  --navy-soft: #eef1f3; --navy-ink: #38474f;
  --on-accent: #fff; --on-accent-dim: #c9d3d9; --on-accent-weak: #e6c3b8;
}
:root[data-studio-resolved="slate"] .artifact > header,
:root[data-studio-resolved="slate"] .hero {
  background: linear-gradient(125deg, #f3f5f6, #fff 55%);
}

/* ── DARK WORKBENCH ───────────────────────────────────────────────────────
   Not an inversion. Dense ledger tables turn to mush if values are simply
   flipped, so surfaces are layered by lightness — page < paper < control —
   and the borders carry more of the structure than they do in light.
   Written once; "follow system" resolves to this exact block.              */
:root[data-studio-resolved="dark"] {
  color-scheme: dark;
  --ink: #e6ecf2; --navy: #cfe0f2; --blue: #7fb0d8; --muted: #9aa8b5;
  --line: #2b3742; --paper: #161e26; --soft: #1c262f;
  --page: #10171d; --control: #1c262f; --control-line: #3a4855;
  --clay: #d08a68; --clay-soft: #33241d; --clay-ink: #e0a184;
  --gold: #d6a94f; --gold-soft: #322914; --gold-ink: #e3bd6d; --gold-text: #e8cd93;
  --green: #6fbb92; --green-soft: #16281f; --green-ink: #9ad4b4;
  --red: #e08b84; --red-soft: #2e1c1b; --red-ink: #eda9a3;
  --navy-soft: #1a2b3d; --navy-ink: #b9d3ee;
  --on-accent: #0d141a; --on-accent-dim: #3d5a76; --on-accent-weak: #7a4f3f;
}
/* Structural adjustments dark needs beyond token values. */
:root[data-studio-resolved="dark"] .rail a.active { background: #27567f; --on-accent: #fff; color: #fff; }
:root[data-studio-resolved="dark"] .rail a.active small,
:root[data-studio-resolved="dark"] .rail a.active i { color: #bcd6ef; }
:root[data-studio-resolved="dark"] .rail a.active small.weak { color: #f2b79b; }
:root[data-studio-resolved="dark"] .artifact > header,
:root[data-studio-resolved="dark"] .hero { background: linear-gradient(125deg, #1c262f, #161e26 55%); }
:root[data-studio-resolved="dark"] .scoreOption.on,
:root[data-studio-resolved="dark"] .dispActions button.primary,
:root[data-studio-resolved="dark"] .studioEmpty button,
:root[data-studio-resolved="dark"] .reportTile button:hover {
  background: #27567f; border-color: #4b84bd; color: #fff;
}
:root[data-studio-resolved="dark"] .scoreOption.on b,
:root[data-studio-resolved="dark"] .scoreOption.on small { color: #fff; }
:root[data-studio-resolved="dark"] .field .val,
:root[data-studio-resolved="dark"] .studioInput,
:root[data-studio-resolved="dark"] .dispForm textarea,
:root[data-studio-resolved="dark"] .dispForm select,
:root[data-studio-resolved="dark"] .dispForm input[type="text"],
:root[data-studio-resolved="dark"] .pill.pillEdit select,
:root[data-studio-resolved="dark"] .pill.pillEdit input[type="text"] { background: #111920; }
:root[data-studio-resolved="dark"] .reportTile.canonical { background: linear-gradient(150deg, #1c262f, #161e26 65%); }
:root[data-studio-resolved="dark"] .dispState.validated::before { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--navy); }

/* Theme picker in the topbar. Dev affordance; remove once a palette is chosen. */
.themePicker { border: 1px solid var(--control-line); border-radius: 7px; background: var(--control); color: var(--navy); font: 700 11.5px var(--font); padding: 4px 8px; }
.themePicker:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

@media print { .themePicker { display: none; } }