/**
 * Light UI theme — component overrides
 * Tokens live in qss-tokens.css; this file covers edge cases & legacy markup.
 */

html.qss-light-theme .qss-header-title,
html.qss-light-theme .qss-header-title span,
html.qss-light-theme .qss-header-title .qss-header-app-name,
html.qss-light-theme .qss-brand-name {
  color: var(--qss-shell-text);
}

html.qss-light-theme .qss-brand-sub {
  color: #64748b;
}

html.qss-light-theme .qss-btn--icon.qss-btn--ghost {
  color: var(--qss-shell-text);
}

html.qss-light-theme .qss-tab-btn:hover {
  color: var(--qss-shell-tab-hover-text);
}

html.qss-light-theme .qss-format-toolbar .qss-select,
html.qss-light-theme .qss-format-toolbar .qss-input {
  background: var(--qss-shell-input-bg);
  color: var(--qss-shell-text);
  border-color: var(--qss-shell-input-border);
}

html.qss-light-theme .qss-format-toolbar label {
  color: var(--qss-shell-muted);
}

html.qss-light-theme #qss-project-title-input {
  background: var(--qss-shell-input-bg);
  color: var(--qss-shell-text);
  border: 1px solid var(--qss-shell-input-border);
}

html.qss-light-theme #qss-markdown-editor {
  background: var(--qss-shell-markdown-bg);
  color: var(--qss-shell-markdown-text);
  border-color: var(--qss-shell-input-border);
}

html.qss-light-theme .qss-inspector .qss-input,
html.qss-light-theme .qss-inspector .qss-select {
  background: var(--qss-shell-input-bg);
  color: var(--qss-shell-text);
  border-color: var(--qss-shell-input-border);
}

html.qss-light-theme .qss-inspector strong,
html.qss-light-theme .qss-panel-section h4 {
  color: var(--qss-shell-text);
}

html.qss-light-theme .qss-empty-state h3 {
  color: var(--qss-shell-text);
}

/* Dashboard */
html.qss-light-theme .qss-dashboard-container {
  background:
    radial-gradient(circle at top right, var(--qss-shell-canvas-gradient-1), transparent 45%),
    radial-gradient(circle at bottom left, var(--qss-shell-canvas-gradient-2), transparent 45%),
    var(--qss-shell-bg);
}

html.qss-light-theme .qss-dash-header {
  background: var(--qss-shell-header-bg);
  border-bottom-color: var(--qss-shell-divider);
}

html.qss-light-theme .qss-dash-header h1 {
  background: linear-gradient(135deg, #0f172a 30%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.qss-light-theme .qss-project-card {
  background: var(--qss-shell-card-bg);
  border-color: var(--qss-shell-card-border);
  box-shadow: 0 4px 20px var(--qss-shell-shadow);
}

html.qss-light-theme .qss-project-card:hover {
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
}

html.qss-light-theme .qss-project-thumb {
  background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 100%);
}

html.qss-light-theme .qss-project-info h3 {
  color: var(--qss-shell-text);
}

html.qss-light-theme .qss-toolbar-btn {
  color: var(--qss-shell-text);
}

html.qss-light-theme .qss-toolbar-btn:hover {
  background: var(--qss-shell-surface-hover);
}

html.qss-light-theme .qss-editor-stage-shell {
  box-shadow: 0 16px 40px var(--qss-shell-shadow);
}

html.qss-light-theme .qss-slide-page {
  border-color: rgba(15, 23, 42, 0.08);
}

html.qss-light-theme .qss-slide-thumb-number {
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

html.qss-light-theme .qss-thumb-preview-container {
  background: var(--qss-shell-thumb-bg) !important;
}

/* Export modal & dynamic panels use --studio-* vars — remapped in tokens */