/* ══════════════════════════════════════════════════════════════════════
   STUDIO CONSOLE — design tokens + component primitives
   2026-05-25 — handoff from Claude Design (lidia-ui-redesign)
   ══════════════════════════════════════════════════════════════════════

   PURPOSE
   ─────────
   This file ships the design system from the 2026-05-25 Studio Console
   redesign WITHOUT replacing the existing LIDIA tokens.css. It coexists
   with the legacy `.lidia-*` system; surfaces refactored to the new
   design use the `.sc-*` class prefix and reference these tokens.

   LOAD ORDER
   ─────────
   /css/tokens.css         → existing LIDIA tokens (--cyan, --bg, etc.)
   <style>Brand::cssVars   → agency override of --cyan / --cyan2 (inline)
   /css/sc.css             → THIS FILE — adds --primary etc. aliased to
                             --cyan so brand override cascades to the new
                             surface system automatically.

   ACTIVATION
   ─────────
   Wrap a surface in <div class="sc-root" data-theme="dark"> (or "light")
   to opt that surface into the new system. Existing surfaces keep the
   `body[data-mode]` system; both selectors are honored by the tokens
   below so legacy + new can coexist on the same page.

   FONTS
   ─────
   Gotham loads via local @font-face below; falls back to Montserrat
   (loaded by the layout from Google Fonts), then to system stack. Apply
   to sc-* surfaces via the `--font-sans` variable on `.sc-root`.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Gotham (locally licensed) ─────────────────────────────────────── */
@font-face {
  font-family: 'Gotham';
  src: local('Gotham Book'), local('Gotham-Book'), local('Gotham');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: local('Gotham Medium'), local('Gotham-Medium');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: local('Gotham Bold'), local('Gotham-Bold');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════
   TOKENS — MIGRATED 2026-05-25 (Part L Phase A) to /css/tokens.css
   This file now contains ONLY sc-* component primitives. All design
   tokens (--primary, --rail-bg, --stage-*, --font-sans, etc.) live in
   the canonical tokens.css. Brand::cssVars override of --cyan still
   cascades to --primary via tokens.css's alias chain.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PRIMITIVES — sc-* utility classes
   ══════════════════════════════════════════════════════════════════════ */

.sc-root {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  display: flex;
  min-height: 100vh;
}
.sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }
.sc-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.003em;
}

/* ── Text helpers ──────────────────────────────────────────────────── */
.sc-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
}
.sc-h1 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0;
  line-height: 1.2; color: var(--text);
}
.sc-h2 {
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; margin: 0;
  line-height: 1.3; color: var(--text);
}
.sc-sub { font-size: 13px; color: var(--text-mid); }

/* ── Rail (sidebar) ────────────────────────────────────────────────── */
.sc-rail {
  width: 248px;
  flex-shrink: 0;
  background: var(--rail-bg);
  color: var(--text);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-rail);
}
.sc-rail-section { padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
.sc-rail-heading {
  padding: 14px 16px 6px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: space-between;
}

.sc-nav {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--text-mid);
  line-height: 1.3; user-select: none;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.sc-nav:hover { background: var(--card-bg-2); color: var(--text); }
.sc-nav.active { background: var(--card-bg-3); color: var(--text); }
.sc-nav.active .sc-nav-i { color: var(--primary); }
.sc-nav-i {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.sc-nav.active .sc-nav-count { color: var(--text); }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.sc-topbar {
  flex-shrink: 0;
  height: 48px;
  padding: 0 20px;
  display: flex; align-items: center; gap: 10px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.sc-btn {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1; height: 30px; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.sc-btn:hover { background: var(--card-bg-2); border-color: var(--border-hi); }

.sc-btn-primary {
  background: var(--primary);
  color: var(--primary-on);
  border-color: var(--primary);
  font-weight: 600;
}
.sc-btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.sc-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-mid);
}
.sc-btn-ghost:hover { background: var(--card-bg-2); color: var(--text); }

.sc-btn-icon { width: 30px; height: 30px; padding: 0; justify-content: center; }
.sc-btn-sm   { height: 26px; font-size: 12px; padding: 4px 9px; }
.sc-btn-xs   { height: 22px; font-size: 11.5px; padding: 3px 7px; }

/* ── Segmented control ─────────────────────────────────────────────── */
.sc-seg {
  display: flex; align-items: center; height: 30px;
  padding: 2px;
  background: var(--inset-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  gap: 2px;
}
.sc-seg > button {
  font: inherit; font-size: 12px; font-weight: 500;
  height: 24px; padding: 0 12px;
  border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--text-mid);
  cursor: pointer; line-height: 1; white-space: nowrap;
}
.sc-seg > button:hover { color: var(--text); }
.sc-seg > button[aria-pressed="true"] {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.sc-input {
  font: inherit; font-size: 13px;
  background: var(--inset-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 11px;
  border-radius: var(--r-md);
  outline: none; height: 30px;
  transition: border-color .12s, box-shadow .12s;
}
.sc-input::placeholder { color: var(--text-dim); }
.sc-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.sc-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 11px; height: 30px;
  background: var(--inset-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: 12.5px; min-width: 220px;
}
.sc-search input {
  background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 13px;
  flex: 1; min-width: 0;
}
.sc-search input::placeholder { color: var(--text-dim); }

.sc-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  line-height: 1.4;
  background: var(--card-bg);
}

/* ── Cards & panels (information windows) ──────────────────────────── */
.sc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-height: 0;
}
.sc-card-header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-shrink: 0;
}
.sc-card-title {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.sc-card-body { padding: 14px 16px; }
.sc-card.is-hoverable {
  transition: background .12s, border-color .12s, box-shadow .12s;
  cursor: pointer;
}
.sc-card.is-hoverable:hover {
  background: var(--card-bg-2);
  border-color: var(--border-hi);
  box-shadow: var(--shadow);
}

/* ── Chips ──────────────────────────────────────────────────────────── */
.sc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--card-bg-3);
  color: var(--text);
  border: 1px solid transparent;
  line-height: 1.5; white-space: nowrap;
}
.sc-chip.is-primary { background: var(--primary-soft); color: var(--primary); }
.sc-chip.is-success { background: var(--success-soft); color: var(--success); }
.sc-chip.is-warn    { background: var(--warn-soft);    color: var(--warn); }
.sc-chip.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.sc-chip.is-indigo  { background: var(--indigo-soft);  color: var(--indigo); }

/* ── Avatar ─────────────────────────────────────────────────────────── */
.sc-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  color: white; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--indigo));
}

/* ── Table ──────────────────────────────────────────────────────────── */
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th {
  text-align: left; padding: 8px 12px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.sc-table td {
  padding: 10px 12px; font-size: 13px;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
}
.sc-table tr:last-child td { border-bottom: none; }
.sc-table tr.is-hoverable:hover td { background: var(--card-bg-2); }

/* ── Dividers ───────────────────────────────────────────────────────── */
.sc-hr { height: 1px; background: var(--divider); border: 0; margin: 0; }
.sc-vr { width: 1px;  background: var(--divider); align-self: stretch; }

/* ── Scrollbar (opt-in via .sc-scroll) ─────────────────────────────── */
.sc-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.sc-scroll::-webkit-scrollbar-thumb { background: var(--card-bg-3); border-radius: 4px; }
.sc-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
.sc-scroll::-webkit-scrollbar-track { background: transparent; }