/* Shared visual language for the public site and every member workshop.
 * themes.css owns colors; fonts.css owns font families. Load this last. */
html {
  --font-label: var(--font-ui);
  --radius-control: 10px;
  --radius-card: 18px;
  --focus-ring: var(--accent2);
}
:root, html[data-theme] {
  --panel: var(--surface);
  --panel-alt: var(--surface2);
  --field: var(--surface-solid);
  --text: var(--ink);
  --dim: var(--soft);
  --accent-2: var(--accent2);
  --hair: color-mix(in srgb, var(--accent2) 18%, transparent);
  --surface-2: var(--surface2);
  --surface-3: var(--surface-solid);
  --surface-code: var(--surface-solid);
  --radius: var(--radius-card);
}
html body { color: var(--ink); }
html body :is(button, input, select, textarea) { font-family: var(--font-ui); }
html body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
html body ::selection {
  background: var(--accent);
  color: var(--on-accent);
}
/* Same wordmark in both shells; navigation and working text stay in Inter. */
html body .common-brand-copy {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
}
html body .common-brand-copy small { font-family: var(--font-ui); }
html body #appTopbar .brand-ilm { color: var(--accent); }
body.studio-app .common-brand-copy { font-size: 28px; }
body.studio-app :is(.studio-page-hero h1, .workspace-welcome h1, .workflow-head h1, .chain-head h1) {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body.studio-app :is(.studio-page-hero p, .workspace-welcome p, .workflow-head p) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
body.studio-app :is(.card > h2, .workspace-section-head h2, .film-compose > h2) {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -.015em;
}
body.studio-app :is(label, .model-inputs label) { font-size: 12px; line-height: 1.5; }
body.studio-app :is(.hint, .empty, .ws-description) { font-size: 13px; line-height: 1.6; }
body.studio-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  border-radius: var(--radius-control);
}
body.studio-app :is(input, textarea)::placeholder { color: var(--soft); opacity: 1; }
/* Primary actions use the primary hue, never a gold-to-cyan gradient. */
body.studio-app :is(button.btn, button.chain-run) {
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
body.studio-app :is(button.btn, button.chain-run):hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}
body.studio-app :is(button.btn, button.chain-run):disabled { opacity: .5; cursor: not-allowed; }
body.studio-app :is(button.btn.sec, button.btn.secondary, .btn.ghost) {
  color: var(--ink);
  background: var(--field);
  border-color: var(--line);
}
body.studio-app :is(button.btn.sec, button.btn.secondary, .btn.ghost):hover:not(:disabled) {
  background: var(--panel-alt);
  border-color: var(--accent);
}
@media (max-width: 700px) {
  body.studio-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    font-size: 16px;
  }
  body.studio-app .common-brand-copy { font-size: 24px; }
}