/* ──────────────────────────────────────────────────────────
 * La Voce / shared design-language tokens (promoted from design-lab/ux-lab.css).
 *
 * This is the production home for the warm, literary token system the product's
 * design language is built on: warm paper grounds, ink tones, one terracotta accent,
 * a humanist serif for display, a clean sans for UI, mono for labels. Surfaces opt in
 * by using the `--lab-*` variables and the `.lab-*` primitives below.
 *
 * Namespaced (`--lab-*`, `.lab-*`) so it never collides with the legacy `--wcp-*`
 * lacquer system. Intentionally contains NO global element resets (no `html, body`,
 * no `a {}`) — only tokens + opt-in classes — so loading it cannot restyle the rest
 * of the app. Scope a region to the design language with the `.lab-surface` class.
 * ────────────────────────────────────────────────────────── */

:root {
  --lab-paper:      #f7f1e8;
  --lab-paper-warm: #ede3cc;
  --lab-paper-card: var(--ds-paper);
  --lab-ink:        var(--ds-ink);
  --lab-ink-mid:    var(--ds-ink-soft);
  --lab-ink-faint:  var(--ds-ink-faint);
  --lab-rule:       rgba(201, 184, 154, 0.55);
  --lab-margin:     rgba(217, 119, 87, 0.5);
  --lab-gold:       var(--ds-gold);
  --lab-gold-deep:  var(--ds-gold-deep);
  --lab-rust:       var(--ds-terracotta);
  --lab-rust-soft:  rgba(217, 119, 87, 0.12);
  --lab-green:      var(--ds-green);
  --lab-blue:       #3c6ea8;
  --lab-shadow:     0 14px 32px rgba(20, 18, 14, 0.09);
  --lab-shadow-sm:  0 4px 10px rgba(20, 18, 14, 0.06);
  --lab-radius:     14px;
  --lab-radius-sm:  8px;
  --lab-serif:      var(--ds-font-display);
  --lab-sans:       var(--ds-font-ui);
  --lab-mono:       var(--ds-font-mono);
  /* spacing scale (8px base) */
  --lab-sp-xs: 0.35rem;
  --lab-sp-sm: 0.6rem;
  --lab-sp-md: 1rem;
  --lab-sp-lg: 1.5rem;
  --lab-sp-xl: 2.25rem;
}

html.dark {
  --lab-paper:      #1c1e27;
  --lab-paper-warm: #22242e;
  --lab-paper-card: #22242e;
  --lab-ink:        #e8d8b4;
  --lab-ink-mid:    rgba(232, 216, 180, 0.62);
  --lab-ink-faint:  rgba(232, 216, 180, 0.36);
  --lab-rule:       rgba(255, 255, 255, 0.08);
  --lab-margin:     rgba(217, 119, 87, 0.4);
  --lab-rust-soft:  rgba(217, 119, 87, 0.16);
  --lab-shadow:     0 14px 32px rgba(0, 0, 0, 0.32);
  --lab-shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.28);
}

/* ── The warm-paper LIGHT PIN — ONE definition, every pinned surface ──────
 * The app shell defaults to dark and `html.dark` above flips --lab-* dark,
 * which would render the "warm paper" surfaces DARK. These surfaces are
 * pinned to their LIGHT values regardless of app theme (lab_canon rule 1:
 * "warm-paper LIGHT palette always, even when the app's global theme is dark").
 *
 * This block used to be copy-pasted into views-modules-lab.css and
 * voce-fresh.css — copies whose values had drifted from the :root set above
 * (paper-card #fffbf4 vs --ds-paper, ink-mid rgba(26,23,20,…) vs
 * --ds-ink-soft). Same token name, different colour depending on which surface
 * you were looking at: exactly the coherence fracture the two-voices law
 * forbids (NORTH_STAR creed 8 — "both voices obey the same tokens").
 * Collapsed 2026-07-24 (plan ui-enforcement-and-magic E2).
 *
 * NOTHING MOVES VISUALLY, and the reasoning is worth keeping because it is the
 * whole safety argument: the two copies agreed byte-for-byte on every token
 * they shared, so those are unchanged. voce-fresh additionally picks up
 * --lab-rust/-deep/--lab-gold/-deep/--lab-green here, which is safe precisely
 * because `html.dark` above does NOT override those four — the :root values it
 * used to inherit are the same values pinned here, in both themes.
 * --lab-shadow/-sm are deliberately NOT pinned: html.dark DOES override them,
 * so pinning would be a real (if arguably nicer) visual change, and E2's
 * contract is a mechanical collapse with no visual change.
 *
 * Specificity note: these are id/class selectors, so they beat the `:root`
 * and `html.dark` blocks above no matter the stylesheet load order. Any new
 * light-pinned surface joins THIS selector list — it does not re-declare. */
#module-overlay,
#view-speech .speech-daily-stepper,
#view-speech.voce-fresh {
  --lab-paper:      #f7f1e8;
  --lab-paper-warm: #ede3cc;
  --lab-paper-card: #fffbf4;
  --lab-ink:        var(--ds-ink);
  --lab-ink-mid:    rgba(26, 23, 20, 0.62);
  --lab-ink-faint:  rgba(26, 23, 20, 0.36);
  --lab-rule:       rgba(201, 184, 154, 0.55);
  --lab-rust:       var(--ds-terracotta);
  --lab-rust-deep:  var(--ds-terracotta-deep);
  --lab-rust-soft:  rgba(217, 119, 87, 0.12);
  --lab-gold:       var(--ds-gold);
  --lab-gold-deep:  var(--ds-gold-deep);
  --lab-green:      var(--ds-green);
}

/* ── Opt-in surface ground ─────────────────────────────────── */
.lab-surface {
  background: var(--lab-paper);
  color: var(--lab-ink);
  font-family: var(--lab-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography primitives ─────────────────────────────────── */
.lab-kicker {
  font-family: var(--lab-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lab-rust);
  margin: 0 0 var(--lab-sp-xs);
}
.lab-display {
  font-family: var(--lab-serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--lab-ink);
  margin: 0;
}
.lab-italic {
  font-family: var(--lab-serif);
  font-style: italic;
}
.lab-lede {
  font-size: 0.95rem;
  color: var(--lab-ink-mid);
  line-height: 1.6;
}
.lab-section-label {
  font-family: var(--lab-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lab-ink-faint);
  margin: 0 0 var(--lab-sp-sm);
}

/* ── Card ──────────────────────────────────────────────────── */
.lab-card {
  background: var(--lab-paper-card);
  border: 1px solid var(--lab-rule);
  border-radius: var(--lab-radius);
  box-shadow: var(--lab-shadow-sm);
  padding: var(--lab-sp-lg);
}
.lab-card--hero {
  position: relative;
  overflow: hidden;
  box-shadow: var(--lab-shadow);
}
.lab-card--hero::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--lab-rust);
}

/* ── Stat cells ────────────────────────────────────────────── */
.lab-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lab-sp-sm);
}
.lab-stat-cell {
  padding: 0.75rem 0.85rem;
  background: var(--lab-paper-warm);
  border: 1px solid var(--lab-rule);
  border-radius: var(--lab-radius-sm);
  text-align: center;
}
.lab-stat-val {
  font-family: var(--lab-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lab-rust);
  display: block;
}
.lab-stat-label {
  font-size: 0.66rem;
  color: var(--lab-ink-faint);
  display: block;
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* ── Chips ─────────────────────────────────────────────────── */
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--lab-rule);
  background: var(--lab-paper-warm);
  color: var(--lab-ink-mid);
}
.lab-chip--focus {
  border-color: rgba(217, 119, 87, 0.4);
  color: var(--lab-rust);
  background: var(--lab-rust-soft);
}

/* ── Buttons ───────────────────────────────────────────────── */
.lab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  background: var(--lab-rust);
  color: #fff;
  border: none;
  border-radius: var(--lab-radius-sm);
  font-family: var(--lab-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
}
.lab-btn:hover { opacity: 0.9; }
.lab-btn:active { transform: translateY(1px); }
.lab-btn--ghost {
  background: transparent;
  color: var(--lab-gold-deep);
  border: 1px solid var(--lab-gold);
}
.lab-btn--ghost:hover { background: rgba(184, 137, 59, 0.08); opacity: 1; }

/* ── Input ─────────────────────────────────────────────────── */
.lab-input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--lab-rule);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-paper-card);
  color: var(--lab-ink);
  font-family: var(--lab-sans);
  font-size: 0.95rem;
  outline: none;
}
.lab-input:focus {
  border-color: var(--lab-rust);
  box-shadow: 0 0 0 2px var(--lab-rust-soft);
}

/* ── Divider ───────────────────────────────────────────────── */
.lab-divider {
  border: none;
  border-top: 1px solid var(--lab-rule);
  margin: var(--lab-sp-lg) 0;
}