/*
 * theme.css — Switchboard's design-system values.
 * Terminal mood: dark ink ground, amber signal accent, hairline rules,
 * 4px corners, no elevation (shadow tier 0). Opens dark; a paper/teletype
 * light mode sits under html[data-theme="light"].
 */

:root {
  color-scheme: dark;

  --canvas: #0b0d0c;
  --surface: #232524;
  --surface-2: #2b2d2a;
  --border: #34362f;
  --border-strong: #4b4d43;
  --ink: #e7e5de;
  --muted: #97968e;

  --accent: #f2a93b;
  --accent-hover: #ffbf5c;
  --accent-ink: #171310;
  --accent-text: #f2a93b;
  --accent-strong: #f2a93b;
  --accent-soft: #2c2210;
  --accent-border: #5c4519;

  --success: #3ddc84;
  --success-ink: #06210f;
  --success-soft: #12291a;
  --success-strong: #6fe3a4;
  --warning: #e2622f;
  --warning-ink: #2a0f06;
  --warning-soft: #33200f;
  --warning-strong: #ef8a5c;
  --danger: #ff5c5c;
  --danger-ink: #2a0a0a;
  --danger-soft: #341313;
  --danger-strong: #ff8787;

  --chart-1: #f2a93b;
  --chart-2: #3ddc84;
  --chart-3: #5eb3e4;
  --chart-4: #e2622f;
  --chart-5: #b98ce8;
  --chart-6: #6fd1c9;

  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 0 0 1px var(--border-strong);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.04em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f3efe4;
  --surface: #ffffff;
  --surface-2: #ece5d2;
  --border: #ddd4bd;
  --border-strong: #bfb192;
  --ink: #201c14;
  --muted: #6e6656;

  --accent: #9c5f09;
  --accent-hover: #7e4f08;
  --accent-ink: #fffaf0;
  --accent-text: #8a5709;
  --accent-strong: #7c4e08;
  --accent-soft: #f3e2c0;
  --accent-border: #dcb97a;

  --success: #157a43;
  --success-ink: #ffffff;
  --success-soft: #dcefe1;
  --success-strong: #0f5c32;
  --warning: #ad4a1a;
  --warning-ink: #ffffff;
  --warning-soft: #f3ddc9;
  --warning-strong: #8c3b14;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dad8;
  --danger-strong: #8c1d17;

  --chart-1: #b8720c;
  --chart-2: #157a43;
  --chart-3: #1f6fa8;
  --chart-4: #ad4a1a;
  --chart-5: #7a4fae;
  --chart-6: #157a7a;
}

/*
 * app.css — Switchboard's own CSS. A patch-panel console: a faint scanline
 * ground, a signal-light status dot, a near-black statement band, a mono
 * code block, and the one motion the brief allows — a freshly routed row
 * entering the activity log. Tokens only.
 */

/* ---- Ground ---------------------------------------------------------- */
body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 100% 2.25rem;
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
}

/* ---- Console column ---------------------------------------------------- */
.console-col { max-width: 70rem; }
.console-rule { border-top: var(--border-w, 1px) solid var(--border); }

/* ---- Signal light: a static amber LED, never blinking (motion: none) -- */
.signal-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  flex: none;
}
.signal-dot.is-off {
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 14%, transparent);
}

/* ---- Prompt caret glyph, static — the terminal mark without motion ---- */
.prompt::before {
  content: ">";
  color: var(--accent);
  margin-right: 0.5rem;
  font-family: var(--font-mono);
}

/* ---- Keyword highlight inside a logged subject line -------------------- */
mark.kw {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: var(--border-w, 1px) solid var(--accent-border);
  border-radius: 2px;
  padding: 0 0.25em;
  font-family: var(--font-mono);
}

/* ---- Code block: the required header row ------------------------------- */
.code-block {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  background: color-mix(in srgb, black 32%, var(--surface));
  border: var(--border-w, 1px) solid var(--border-strong);
  border-radius: var(--radius-card, 4px);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
}

/* ---- Statement band: near-black, full width, its own ground -------------
   The palette's tokens (--ink, --muted, --border, …) belong to the owner
   and are never redeclared here. Instead the band sets its OWN `color` and
   `border-color`, computed with color-mix over --canvas (never a literal),
   and descendants that would otherwise read the page's --ink/--muted via a
   primitive or a utility class are overridden by selector, unlayered, so
   they win over both without touching a token. */
.band-dark {
  background: color-mix(in srgb, black 55%, var(--canvas));
  border-top: var(--border-w, 1px) solid color-mix(in srgb, white 16%, var(--canvas));
  border-bottom: var(--border-w, 1px) solid color-mix(in srgb, white 16%, var(--canvas));
  color: color-mix(in srgb, white 92%, var(--canvas));
}
.band-dark .text-ink,
.band-dark strong { color: color-mix(in srgb, white 94%, var(--canvas)); }
.band-dark .text-muted { color: color-mix(in srgb, white 60%, var(--canvas)); }
.band-dark .border-border,
.band-dark .border-border-strong { border-color: color-mix(in srgb, white 18%, var(--canvas)); }
.band-dark .code-block {
  background: color-mix(in srgb, black 25%, var(--canvas));
  border-color: color-mix(in srgb, white 20%, var(--canvas));
  color: color-mix(in srgb, white 85%, var(--canvas));
}

/* ---- Numbered technical walkthrough — prose, never cards --------------- */
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.step + .step { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-w, 1px) solid var(--border); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent);
  padding-top: 0.15rem;
}

/* ---- Rules table: inline-edit affordance -------------------------------- */
.rule-field {
  width: 100%;
  background: transparent;
  border: var(--border-w, 1px) solid transparent;
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
  margin: -0.35rem -0.5rem;
  color: inherit;
  font: inherit;
}
.rule-field:hover { border-color: var(--border-strong); }
.rule-field:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

/* ---- Activity log: the one moment that moves --------------------------- */
@keyframes log-row-in {
  from { opacity: 0; transform: translateY(-6px); background-color: var(--accent-soft); }
  to   { opacity: 1; transform: none; }
}
.log-row-enter { animation: log-row-in 640ms ease-out both; }
html.reduced-motion .log-row-enter { animation: none; }

/* ---- Status word chips inside the log ----------------------------------- */
.status-word { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }