/* Bridge the K3 PMT theme pack tokens into the pipeline frontend UI. */

body[data-theme^="k3-"] {
  font-family: var(--font-ui, "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
  background:
    radial-gradient(1200px 720px at -10% -20%, var(--bg-radial-a) 0, transparent 62%),
    radial-gradient(980px 660px at 110% -10%, var(--bg-radial-b) 0, transparent 58%),
    linear-gradient(180deg, var(--bg-base), var(--bg-alt));
  color: var(--text);
  --bg-top: var(--bg-base);
  --bg-bottom: var(--bg-alt);
  --surface: var(--card);
  --surface-2: var(--card-soft);
  --line: var(--card-border);
  --accent: var(--pill-border);
  --accent-soft: var(--pill-text);
  --field-bg: var(--input-bg);
  --output-bg: var(--pre-bg);
  --brand-sign-bg: var(--card-soft);
  --brand-sign-border: var(--card-border);
  --brand-sign-title: var(--text);
  --brand-sign-meta: var(--muted);
  --brand-sign-separator: var(--pill-text);
}

body[data-theme^="k3-"] .brand-header {
  border-bottom-color: var(--card-border);
  background: linear-gradient(180deg, var(--card-soft), var(--card));
  box-shadow: var(--card-shadow);
}

body[data-theme^="k3-"] .brand-sign,
body[data-theme^="k3-"] .runtime-backend-notice,
body[data-theme^="k3-"] .panel,
body[data-theme^="k3-"] .pipeline-interrupt-panel,
body[data-theme^="k3-"] .auth-token-dialog,
body[data-theme^="k3-"] .service-run-detail-dialog {
  border-color: var(--card-border);
  background: linear-gradient(180deg, var(--card-soft), var(--card));
  box-shadow: var(--card-shadow);
}

body[data-theme^="k3-"] .panel::after {
  background: radial-gradient(circle at 45% 35%, var(--bg-radial-b), transparent 72%);
}

body[data-theme^="k3-"] .panel::before {
  background: radial-gradient(circle at 60% 40%, var(--bg-radial-a), transparent 72%);
}

body[data-theme^="k3-"] .graph-title,
body[data-theme^="k3-"] .brand-meta-line,
body[data-theme^="k3-"] .pipeline-service-status-chip,
body[data-theme^="k3-"] .runtime-backend-notice {
  color: var(--text);
}

body[data-theme^="k3-"] header .sub,
body[data-theme^="k3-"] .small-note,
body[data-theme^="k3-"] .pipeline-service-status-title,
body[data-theme^="k3-"] .pipeline-service-status-empty,
body[data-theme^="k3-"] .service-run-detail-meta,
body[data-theme^="k3-"] .auth-token-detail,
body[data-theme^="k3-"] .auth-token-note {
  color: var(--muted);
}

body[data-theme^="k3-"] header code,
body[data-theme^="k3-"] footer code {
  color: var(--pre-text);
  background: var(--pre-bg);
  border-color: var(--pre-border);
}

body[data-theme^="k3-"] .hover-info {
  border-color: var(--pill-border);
  color: var(--pill-text);
  background: var(--ghost-bg);
}

body[data-theme^="k3-"] .hover-info-tip {
  border-color: var(--card-border);
  background: var(--card-soft);
  color: var(--text);
  box-shadow: var(--card-shadow);
}

body[data-theme^="k3-"] input,
body[data-theme^="k3-"] textarea,
body[data-theme^="k3-"] select,
body[data-theme^="k3-"] .theme-select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

body[data-theme^="k3-"] input::placeholder,
body[data-theme^="k3-"] textarea::placeholder {
  color: var(--input-placeholder);
}

body[data-theme^="k3-"] input:focus,
body[data-theme^="k3-"] textarea:focus,
body[data-theme^="k3-"] select:focus,
body[data-theme^="k3-"] .theme-select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-shadow);
}

body[data-theme^="k3-"] .numbered-textarea-shell {
  background: var(--input-bg);
  border-color: var(--input-border);
}

body[data-theme^="k3-"] .numbered-textarea-shell .line-numbers {
  background: var(--card-soft);
  border-right-color: var(--card-border);
  color: var(--muted);
}

body[data-theme^="k3-"] .out,
body[data-theme^="k3-"] .service-run-detail-json {
  background: var(--pre-bg);
  border-color: var(--pre-border);
  color: var(--pre-text);
}

body[data-theme^="k3-"] button {
  background: linear-gradient(180deg, var(--btn-bg-a), var(--btn-bg-b));
  border-color: var(--btn-border);
  color: var(--btn-text);
}

body[data-theme^="k3-"] button:hover {
  border-color: var(--focus);
  box-shadow: 0 10px 20px var(--btn-hover-shadow);
}

body[data-theme^="k3-"] button.secondary {
  background: var(--ghost-bg);
  color: var(--ghost-text);
  border-color: var(--ghost-border);
}

body[data-theme^="k3-"] .pipeline-service-status-row {
  border-color: var(--card-border);
  background: var(--card-soft);
}

body[data-theme^="k3-"] .pipeline-service-status-row.is-green {
  border-color: var(--success-border);
  background: var(--success-bg);
}

body[data-theme^="k3-"] .pipeline-service-status-row.is-red {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

body[data-theme^="k3-"] .pipeline-service-status-light {
  border-color: var(--card-border);
  background: var(--muted);
  box-shadow: 0 0 0 1px var(--card);
}

body[data-theme^="k3-"] .pipeline-service-status-light.is-green {
  border-color: var(--success-border);
  background: var(--success-text);
}

body[data-theme^="k3-"] .pipeline-service-status-light.is-red {
  border-color: var(--danger-border);
  background: var(--danger-text);
}

body[data-theme^="k3-"] .pipeline-service-status-name,
body[data-theme^="k3-"] .pipeline-interrupt-title,
body[data-theme^="k3-"] .service-run-detail-header h3,
body[data-theme^="k3-"] .auth-token-badge {
  color: var(--pill-text);
}

body[data-theme^="k3-"] .pipeline-service-status-chip {
  border-color: var(--card-border);
  background: var(--card);
}

body[data-theme^="k3-"] .pipeline-service-status-chip.is-green {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}

body[data-theme^="k3-"] .pipeline-service-status-chip.is-red {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

body[data-theme^="k3-"] .pipeline-service-status-chip.is-amber {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
}

body[data-theme^="k3-"] .auth-token-badge {
  border-color: var(--pill-border);
  background: var(--pill-bg);
}

body[data-theme^="k3-"] .auth-token-error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}