/*
 * theme.css — Cabinet Brand Sync.
 *
 * A showroom-desk admin: warm unbleached-paper grounds, walnut-brown ink and
 * one deep painted-cabinet green as the action colour (think a Shaker door in
 * a heritage green). Dark mode is an evening workshop: near-black oak, cream
 * text, and the green lifted to a pale sage so it still reads as the brand.
 * Type: Archivo for headings (a sturdy grotesque, a little industrial),
 * DM Sans for everything you read, JetBrains Mono for the exact text the
 * agent receives.
 */

:root {
  --canvas: #f6f3ee;
  --surface: #fffdfa;
  --surface-2: #efe9e0;
  --border: #e0d8cc;
  --border-strong: #b9ae9f;
  --ink: #221d17;
  --muted: #665d53;
  --accent: #1f5546;
  --accent-hover: #17443a;
  --accent-ink: #ffffff;
  --accent-text: #1f5546;
  --accent-strong: #163f33;
  --accent-soft: #dcebe4;
  --accent-border: #a9cbbd;
  --success: #2f7a3e;
  --success-ink: #ffffff;
  --success-soft: #e1efe3;
  --success-strong: #22602f;
  --warning: #a35a0a;
  --warning-ink: #ffffff;
  --warning-soft: #f6e7d3;
  --warning-strong: #7f4505;
  --danger: #b42f24;
  --danger-ink: #ffffff;
  --danger-soft: #f7e0dc;
  --danger-strong: #9a2419;
  --chart-1: #1f5546;
  --chart-2: #b5763a;
  --chart-3: #6c5a99;
  --chart-4: #3f7fa6;
  --chart-5: #a8443f;
  --chart-6: #7a8a2e;

  --font-display: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.5rem;
  --radius-card: 0.875rem;
  --radius-input: 0.5rem;
  --btn-weight: 600;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.03), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
  --shadow-raised: 0 18px 48px -18px rgba(0, 0, 0, 0.35);
  --shadow-btn: 0 1px 0 rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
  --canvas: #14120f;
  --surface: #1c1915;
  --surface-2: #25211c;
  --border: #342e27;
  --border-strong: #554b3f;
  --ink: #f2ede5;
  --muted: #a89d8f;
  --accent: #7cc9ab;
  --accent-hover: #95d5bc;
  --accent-ink: #0d241c;
  --accent-text: #86cfb2;
  --accent-strong: #a6dcc6;
  --accent-soft: #1a2f28;
  --accent-border: #2e5547;
  --success: #4caf63;
  --success-ink: #07160b;
  --success-soft: #17291b;
  --success-strong: #8fd29f;
  --warning: #e09a45;
  --warning-ink: #1e1203;
  --warning-soft: #33240f;
  --warning-strong: #f0b977;
  --danger: #e0675b;
  --danger-ink: #1f0605;
  --danger-soft: #3a1714;
  --danger-strong: #f2a097;
  --chart-1: #7cc9ab;
  --chart-2: #e0a368;
  --chart-3: #a796d6;
  --chart-4: #79b3d6;
  --chart-5: #e08a84;
  --chart-6: #b9c46a;
}

/*
 * app.css — what no primitive covers: the agent-text preview, the price
 * tier marks, a switched-off row, and the app's one moving moment — the row
 * you just changed glows green for a beat while the agent's copy updates.
 */

.kb-preview {
  max-height: 30rem;
  overflow: auto;
  margin: 0;
  padding: 1rem 1.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface-2);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--radius-input, 0.5rem);
}

.tier-marks {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.tier-on {
  color: var(--accent-text);
  font-weight: 600;
}
.tier-off {
  color: var(--border-strong);
}

tr.is-off .brand-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

@keyframes row-flash {
  from { background-color: var(--accent-soft); }
  to   { background-color: transparent; }
}
tr.row-flash > td {
  animation: row-flash 1.8s var(--ease-out, ease-out) both;
}
html.reduced-motion tr.row-flash > td {
  animation: none;
}