/*
 * Legacy bridge.
 * Re-maps the variables and hard-coded surfaces of the legacy site.css (still
 * used by the wizard, project/order pages and the admin/supplier/installer
 * portals) onto the new design tokens, so those screens sit inside the new
 * shell without being redesigned. site.css itself is intentionally untouched.
 * Remove a rule here once its screen has moved to lc-* components.
 */
:root {
  --bg0: var(--lc-graphite-950);
  --bg1: var(--lc-graphite-900);
  --bg2: var(--lc-graphite-850);
  --ink: var(--lc-text);
  --muted: var(--lc-text-muted);
  --accent: var(--lc-signal-500);
  --accent-2: var(--lc-signal-300);
  --danger: var(--lc-danger-500);
  --line: rgba(255, 255, 255, 0.12);
  --radius: var(--lc-radius-md);
  --font-display: var(--lc-font-sans);
  --font-body: var(--lc-font-sans);
  --shadow: var(--lc-shadow-lg);
}

.site-main {
  padding-bottom: var(--lc-space-16);
}

.section h2,
.hero h1,
.brand-hero {
  letter-spacing: var(--lc-tracking-tight);
  font-weight: var(--lc-weight-semibold);
}

.panel {
  background: var(--lc-graphite-900);
  border-color: var(--lc-border);
  box-shadow: none;
}

.btn {
  border-radius: var(--lc-radius-sm);
  font-weight: var(--lc-weight-semibold);
}

.btn-primary { color: var(--lc-on-accent); }

.flash {
  background: color-mix(in srgb, var(--lc-signal-500) 8%, var(--lc-graphite-900));
}

.product-switch .btn.is-active,
.viewer-controls .btn.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc-signal-500) 45%, transparent);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  border-radius: var(--lc-radius-sm);
  background: var(--lc-graphite-990);
}

.choice:has(input:checked) {
  background: color-mix(in srgb, var(--lc-signal-500) 6%, transparent);
}