/* TSC theme tokens — source of truth: simcreate-docsv2/src/theme/tsc-theme.css
   Sync copy: WebUi/shared/theme/tsc-theme.css (keep file content identical) */

html {
  --tsc-font-sans: system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-family: var(--tsc-font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body {
  font-family: inherit;
}

[data-tsc-theme="light"] {
  --tsc-page-bg: #f1f5f9;
  --tsc-content-bg: #f8fafc;
  --tsc-sidebar-bg: #f1f5f9;
  --tsc-card-bg: #ffffff;
  --tsc-input-bg: #ffffff;
  --tsc-text: #0f172a;
  --tsc-text-muted: #64748b;
  --tsc-border: #cbd5e1;
  --tsc-border-subtle: #e2e8f0;
  --tsc-primary: #059669;
  --tsc-radius: 0.75rem;
  --tsc-radius-lg: 1rem;
  --tsc-shadow-card: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tsc-header-btn-hover-bg: #f1f5f9;
  --tsc-header-border: #64748b;
  --tsc-avatar-bg: #e2e8f0;
  --tsc-avatar-text: #334155;
  --tsc-menu-bg: #ffffff;
  --tsc-menu-border: #e2e8f0;
  --tsc-field-placeholder: #94a3b8;
}

[data-tsc-theme="dark"] {
  --tsc-page-bg: #020617;
  --tsc-content-bg: #0f172a;
  --tsc-sidebar-bg: #1e293b;
  --tsc-card-bg: #0f172a;
  --tsc-input-bg: #1e293b;
  --tsc-text: #f1f5f9;
  --tsc-text-muted: #94a3b8;
  --tsc-border: #334155;
  --tsc-border-subtle: #1e293b;
  --tsc-primary: #059669;
  --tsc-radius: 0.75rem;
  --tsc-radius-lg: 1rem;
  --tsc-shadow-card: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 8px 10px -6px rgb(0 0 0 / 0.25);
  --tsc-header-btn-hover-bg: #1e293b;
  --tsc-header-border: #64748b;
  --tsc-avatar-bg: #334155;
  --tsc-avatar-text: #f1f5f9;
  --tsc-menu-bg: #0f172a;
  --tsc-menu-border: #475569;
  --tsc-field-placeholder: #64748b;
}

.tsc-shell-page {
  background-color: var(--tsc-page-bg);
  color: var(--tsc-text);
}

.tsc-shell {
  background-color: var(--tsc-content-bg);
  color: var(--tsc-text);
}

.tsc-shell-sidebar {
  background-color: var(--tsc-sidebar-bg);
  border-color: var(--tsc-border);
}

.tsc-shell-content {
  background-color: var(--tsc-content-bg);
}

.tsc-login-page {
  background-color: var(--tsc-page-bg);
  color: var(--tsc-text);
}

.tsc-login-card {
  background-color: var(--tsc-card-bg);
  border-color: var(--tsc-border);
  color: var(--tsc-text);
  border-radius: var(--tsc-radius-lg);
  box-shadow: var(--tsc-shadow-card);
}

.tsc-login-input {
  background-color: var(--tsc-input-bg);
  border-color: var(--tsc-border);
  color: var(--tsc-text);
  border-radius: var(--tsc-radius-lg);
}

.tsc-login-input::placeholder {
  color: var(--tsc-field-placeholder);
}

.tsc-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tsc-header-border, var(--tsc-border));
  border-radius: var(--tsc-radius-lg);
  color: var(--tsc-text);
  background-color: transparent;
}

.tsc-header-btn:hover {
  background-color: var(--tsc-header-btn-hover-bg);
}

.tsc-header-menu {
  background-color: var(--tsc-menu-bg);
  border-color: var(--tsc-menu-border);
}

.tsc-header-menu-item:hover {
  background-color: var(--tsc-header-btn-hover-bg);
}

.tsc-header-avatar {
  background-color: var(--tsc-avatar-bg);
  color: var(--tsc-avatar-text);
}

.tsc-text-muted {
  color: var(--tsc-text-muted);
}

.tsc-theme-field,
.tsc-theme-textarea,
.tsc-theme-picker {
  background-color: var(--tsc-input-bg);
  border: 1px solid var(--tsc-border);
  border-radius: var(--tsc-radius-lg);
  color: var(--tsc-text);
}

[data-tsc-theme="dark"] .tsc-theme-field,
[data-tsc-theme="dark"] .tsc-theme-textarea,
[data-tsc-theme="dark"] .tsc-theme-picker {
  background-color: rgb(15 23 42 / 0.7);
}

.tsc-theme-field::placeholder,
.tsc-theme-textarea::placeholder {
  color: var(--tsc-field-placeholder);
}

.tsc-theme-field,
.tsc-theme-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.tsc-theme-field:focus,
.tsc-theme-textarea:focus,
.tsc-theme-picker:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
}

.tsc-theme-picker {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.tsc-theme-card {
  border-top: 1px solid var(--tsc-border-subtle);
}

.tsc-theme-muted {
  color: var(--tsc-text-muted);
}

.tsc-theme-border {
  border-color: var(--tsc-border);
}