/* operator-skin.css — site-harmonization layer for the Consilience demo.
 *
 * This demo is a FROZEN ARTIFACT copied from another project
 * (PROJECTS-INTEGRATION-PLAN W2). Its own files (style.css, game.js,
 * index.html structure) are never edited; this stylesheet is injected as
 * the LAST <link> in index.html and remaps the demo's parchment/library
 * palette onto the site's operator scheme (DESIGN-REWORK-status-first §1):
 * warm paper ground, surface cards, green actions, gold secondary accent,
 * Inter-first type, flat (no shadows, hover = background shift).
 * If the demo is ever re-synced from upstream, re-inject the <link> and
 * keep this file. No JS or DOM is touched — the game stays playable.
 * Offline-first: no external URLs.
 */

/* ---------- token remap (style.css custom properties) ---------- */
:root {
  --ink: #1a1613;
  --ink-soft: #6c5f4c;
  --parchment: #f4f1ea;
  --parchment-2: #efe9dc;
  --card: #fffdf8;
  --line: #e3dccd;
  --accent: #2f6f48;      /* oxblood -> operator green */
  --accent-2: #c2a23a;    /* brass -> operator gold */
  --good: #2f6f48;
  --bad: #8a2b20;
  --shadow: none;         /* flat — borders do the separating */
  --radius: 8px;
}

/* ---------- ground + type: flat paper, Inter-first ---------- */
html, body {
  background: var(--parchment);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
}
h1, h2, h3, .title-name,
.btn, .slot,
.faculty__name, .fact__title, .board-prompt strong,
.reveal-wall, .notebook-tab, .notebook-tab__count, .nb-fact b {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
.title-name { font-weight: 650; letter-spacing: -0.5px; }

/* ---------- flat interaction: no lift, no glow — background shifts ---------- */
.btn { border-radius: 6px; }
.btn:hover { transform: none; box-shadow: none; background: #f1ebde; }
.btn:active { transform: none; }
.btn--primary { color: #ffffff; }
.btn--primary:hover { background: #285f3e; border-color: #285f3e; }
.faculty:hover { transform: none; box-shadow: none; background: #f1ebde; }
.fact:hover { transform: none; background: #f1ebde; }

/* ---------- hardcoded parchment surfaces -> operator surfaces ---------- */
.board-prompt { background: var(--card); }
.chip--entity { background: var(--parchment-2); }
.slot { background: var(--card); border-radius: 6px; }
.slot.is-filled { background: var(--parchment-2); }
.reveal-wall { background: var(--card); box-shadow: none; }
.reveal-kicker { color: #7a5f12; }   /* gold-as-text needs the ink variant */
.hint { border-radius: 0 6px 6px 0; }
.notebook { box-shadow: none; }
.notebook-tab { box-shadow: none; border-radius: 8px 0 0 8px; }

/* glow/pulse rings re-keyed to operator gold (brass rgba was baked into
   the keyframes; later @keyframes of the same name win) */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 162, 58, 0); }
  50% { box-shadow: 0 0 0 4px rgba(194, 162, 58, 0.18); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 162, 58, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(194, 162, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 162, 58, 0); }
}

/* connection wall SVG: game.js bakes brass/oxblood into presentation
   attributes; CSS outranks presentation attributes, JS untouched */
#wallSvg line { stroke: #c2a23a; }
#wallSvg circle { fill: #2f6f48; }

/* ---------- dark mode (site operator dark values) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e2d6;
    --ink-soft: #b3a890;
    --parchment: #1c1916;
    --parchment-2: #322c25;
    --card: #26221d;
    --line: #3a342c;
    --accent: #6fae84;
    --good: #6fae84;
    --bad: #d08a7d;
  }
  .btn:hover { background: #322c25; }
  .btn--primary { background: #2f6f48; border-color: #2f6f48; color: #e8e2d6; }
  .btn--primary:hover { background: #285f3e; border-color: #285f3e; }
  .faculty:hover, .fact:hover { background: #322c25; }
  .notebook-tab { background: #2f6f48; color: #e8e2d6; }
  .reveal-kicker { color: #c2a23a; }
  .hint b { color: var(--accent); }
  #wallSvg circle { fill: #6fae84; }
}