/* ============================================================
   FORGE THEME KIT — webmusic-hub shared skin (v1)
   Injected into every mirrored app + used as the Hub's base layer.
   Tokens mirror Pattern Forge (moddys.net/forge/). Rules: see
   design/FORGE-DESIGN-SYSTEM.md. Benign-by-design: restyles
   controls/palette/type; does not move layouts around.
   Injection marker: forge:begin ... forge:end (patcher-asserted).
   ============================================================ */

:root {
  --bg: #0c0b09;
  --bg-raise: #131109;
  --panel: #16140f;
  --panel-2: #1b1913;
  --panel-3: #211e17;
  --ink: #ece3cf;
  --ink-dim: #a99f89;
  --ink-faint: #a69c82;
  --line: #2a261d;
  --line-strong: #3b352a;
  --accent: #ff9e4f;
  --accent-soft: rgba(255, 158, 79, 0.14);
  --accent-ink: #201204;
  --danger: #e0604f;
  --ok: #93c793;
  --blue: #82b3d8;
  --synth: #45d6ff;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
  --r: 4px;
}

html { color-scheme: dark; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--ink); }

a { color: var(--accent); }
a:hover { color: #ffb26b; }
a:visited { color: #d98a4a; }

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

code, pre, kbd, samp, tt {
  font-family: var(--mono);
  background: var(--bg-raise);
  border-radius: var(--r);
}
pre { border: 1px solid var(--line); padding: 10px 12px; }

hr { border: 0; border-top: 1px solid var(--line); }

/* ---------- controls ---------- */

button, input[type="button"], input[type="submit"], input[type="reset"] {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 90ms ease, border-color 90ms ease, color 90ms ease;
  box-shadow: none;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
  background: var(--panel-3);
  border-color: #4a4334;
}
button:active { background: var(--bg-raise); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary, button[data-primary] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700;
}

input[type="text"], input[type="search"], input[type="number"], input[type="email"],
input[type="url"], input[type="password"], input[type="tel"], textarea, select {
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  min-height: 26px;
  padding: 4px 6px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

input[type="range"] { accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { background: var(--accent); border: none; border-radius: 2px; }
input[type="range"]::-moz-range-track { background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-moz-range-thumb { background: var(--accent); border: none; border-radius: 2px; }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #4a4334; }
* { scrollbar-color: var(--line-strong) var(--bg); scrollbar-width: thin; }

/* ---------- surfaces / panels ---------- */

.controls, .toolbar, .menu, .dialog, .modal, fieldset {
  background-color: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}
fieldset { border: 1px solid var(--line); border-radius: var(--r); }
legend { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

table { border-color: var(--line); color: var(--ink); }
th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); border-color: var(--line); }
td { border-color: var(--line); }

/* ---------- injected chrome (used by the patcher, safe everywhere) ---------- */

.forge-attrib {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}
.forge-attrib a { color: var(--ink-dim); text-decoration: none; }
.forge-attrib a:hover { color: var(--accent); }
.forge-attrib .forge-led { margin-right: 4px; }

.forge-plate {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 3px 8px;
}

.forge-led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  vertical-align: middle;
}
.forge-led.runs { background: var(--ok); box-shadow: 0 0 6px rgba(147, 199, 147, 0.7); }
.forge-led.previews { background: var(--accent); box-shadow: 0 0 6px rgba(255, 158, 79, 0.7); }
.forge-led.external { background: var(--ink-faint); }

@keyframes forge-midi-pulse { 0% { box-shadow: 0 0 3px rgba(69,214,255,.5); } 50% { box-shadow: 0 0 10px rgba(69,214,255,.9); } 100% { box-shadow: 0 0 3px rgba(69,214,255,.5); } }
.forge-midi {
  position: fixed; right: 10px; bottom: 10px; z-index: 2147483000;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 4px 8px; display: none; gap: 6px; align-items: center;
  user-select: none; pointer-events: none;
}
.forge-midi.on { display: inline-flex; }
.forge-midi .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--synth); animation: forge-midi-pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}