/* Shared editorial palette. No font requests, resets, or unscoped legacy tokens.
 * Homepage may opt in to --editorial-*; only the verified application roots below
 * receive legacy aliases. Keep success / failure / running separate from accent.
 */
:root {
  --editorial-light-bg: #f5f4f0;
  --editorial-light-panel: #fffdf8;
  --editorial-light-raised: #eee9df;
  --editorial-light-text: #222321;
  --editorial-light-sub: #59564f;
  --editorial-light-muted: #625D55;
  --editorial-light-line: #d5cec2;
  --editorial-light-accent: #a9472b;
  --editorial-light-accent-ink: #fffaf3;
  --editorial-light-soft: #f4e4da;
  --editorial-light-success: #286844;
  --editorial-light-running: #2563a6;
  --editorial-dark-bg: #1c1d1b;
  --editorial-dark-panel: #282925;
  --editorial-dark-raised: #34352f;
  --editorial-dark-text: #eeefe8;
  --editorial-dark-sub: #c6c0b5;
  --editorial-dark-muted: #aaa497;
  --editorial-dark-line: #4c4c43;
  --editorial-dark-accent: #e39a7d;
  --editorial-dark-accent-ink: #241f1b;
  --editorial-dark-soft: #40302a;
  --editorial-dark-success: #67cf9a;
  --editorial-dark-running: #88baf1;
}

/* Theme belongs to html on standalone API/tasks, but to the actual Vue root
 * (and the teleported API overlay) on author/canvas. Explicit light/dark roots
 * override inheritance, so an overlay never accidentally reads another theme.
 */
:root,
html :is(.author, .app, .api-template-overlay)[data-theme='dark'] {
  --editorial-bg: var(--editorial-dark-bg);
  --editorial-panel: var(--editorial-dark-panel);
  --editorial-raised: var(--editorial-dark-raised);
  --editorial-text: var(--editorial-dark-text);
  --editorial-sub: var(--editorial-dark-sub);
  --editorial-muted: var(--editorial-dark-muted);
  --editorial-line: var(--editorial-dark-line);
  --editorial-accent: var(--editorial-dark-accent);
  --editorial-accent-ink: var(--editorial-dark-accent-ink);
  --editorial-soft: var(--editorial-dark-soft);
  --editorial-success: var(--editorial-dark-success);
  --editorial-running: var(--editorial-dark-running);
}
:root[data-theme='light'],
html :is(.author, .app, .api-template-overlay)[data-theme='light'] {
  --editorial-bg: var(--editorial-light-bg);
  --editorial-panel: var(--editorial-light-panel);
  --editorial-raised: var(--editorial-light-raised);
  --editorial-text: var(--editorial-light-text);
  --editorial-sub: var(--editorial-light-sub);
  --editorial-muted: var(--editorial-light-muted);
  --editorial-line: var(--editorial-light-line);
  --editorial-accent: var(--editorial-light-accent);
  --editorial-accent-ink: var(--editorial-light-accent-ink);
  --editorial-soft: var(--editorial-light-soft);
  --editorial-success: var(--editorial-light-success);
  --editorial-running: var(--editorial-light-running);
}

/* Extra html specificity survives Vue's dev-injected root declarations.
 * :has scopes body aliases to the standalone API document, including its dialog.
 * The real tasks root is .task-shell, not .task-app.
 */
html :is(.author[data-theme], .app[data-theme], .api-template-overlay[data-theme][data-theme],
          .task-shell, .selector-dialog[data-theme], .template-dialog[data-theme], .rss-picker-overlay[data-theme], body:has(> .api-shell)) {
  --bg: var(--editorial-bg);
  --panel: var(--editorial-panel);
  --raised: var(--editorial-raised);
  --text: var(--editorial-text);
  --sub: var(--editorial-sub);
  --muted: var(--editorial-muted);
  --line: var(--editorial-line);
  --border: var(--editorial-line);
  --accent: var(--editorial-accent);
  --accent-ink: var(--editorial-accent-ink);
  --soft: var(--editorial-soft);
  --side: var(--editorial-raised);
  --card: var(--editorial-panel);
  --card-alt: var(--editorial-raised);
  --line-strong: var(--editorial-muted);
  --accent-deep: var(--editorial-accent);
  --glow: var(--editorial-soft);
  --art: var(--editorial-raised);
  color: var(--text);
}
html .task-shell { background: var(--bg); font-family:'Segoe UI','PingFang SC','Microsoft YaHei UI','Microsoft YaHei',sans-serif; }
html:has(.task-shell){background:var(--editorial-bg);color:var(--editorial-text)}

/* Only known filled accent controls get the paired foreground. No global
 * .primary rule: author, canvas and task buttons have different contracts.
 */
html .author[data-theme] :is(.primary, .brand-mark),
html .app[data-theme] :is(.top-actions .primary, .brand-mark, .confirm-run),
html .selector-dialog .selector-primary,
html .template-dialog footer .template-primary,
html .task-shell .primary,
html body:has(> .api-shell) :is(.sidebar-create, .welcome-cta, .template-primary, .brand-symbol),
html .api-template-overlay[data-theme] .template-primary {
  color: var(--editorial-accent-ink);
}
/* The existing canvas preview explicitly sets !important; match only that CTA. */
html .app[data-theme] .workspace .top-actions .board-primary-actions > .preview-action {
  color: var(--editorial-accent-ink) !important;
}

/* Semantic guards: only old styles which borrowed accent need restoration.
 * Existing hard-coded error reds and running blues are deliberately untouched.
 */
html .author[data-theme] .status[data-status='verified'],
html .app[data-theme] .workflow-guidance li[data-status='success'],
html body:has(> .api-shell) .api-badge.verified,
html .api-template-overlay[data-theme] .api-template-status.is-verified {
  color: var(--editorial-success);
  border-color: var(--editorial-success);
  background: color-mix(in srgb, var(--editorial-success) 12%, var(--panel));
}
html .author[data-theme] .spinner { border-top-color: var(--editorial-running); }
html .task-shell :is(.badge[data-state='enabled'], .badge[data-state='succeeded'],
                    .badge[data-state='success'], .signal:not(.down), .pf-success > svg) {
  --accent: var(--editorial-success);
}
html .task-shell .collection-report { --report-good: var(--editorial-success); }
html .task-shell .collection-report:not([data-tone='warning']):not([data-tone='error']) .verdict-symbol,
html .task-shell .report-timeline > li[data-tone='success'] .timeline-mark {
  --accent: var(--editorial-success);
}
html .task-shell .report-timeline > li[data-tone='active'] .timeline-mark {
  --accent: var(--editorial-running);
}
html body:has(> .api-shell) .online-dot,
html body:has(> .api-shell) .local-indicator span {
  --accent: var(--editorial-success);
}

/* Teleported publishing uses its own variables, not the editor root. */
html .publication-overlay[data-theme]{--pub-bg:var(--editorial-panel);--pub-text:var(--editorial-text);--pub-muted:var(--editorial-sub);--pub-line:var(--editorial-line);--pub-accent:var(--editorial-accent);background:#15151299}
html .publication-overlay[data-theme='light']{--pub-bg:var(--editorial-light-panel);--pub-text:var(--editorial-light-text);--pub-muted:var(--editorial-light-sub);--pub-line:var(--editorial-light-line);--pub-accent:var(--editorial-light-accent)}
html .publication-overlay[data-theme='dark']{--pub-bg:var(--editorial-dark-panel);--pub-text:var(--editorial-dark-text);--pub-muted:var(--editorial-dark-sub);--pub-line:var(--editorial-dark-line);--pub-accent:var(--editorial-dark-accent)}
html .publication-overlay[data-theme='light'] .publication-primary{color:#fff!important}
html .publication-overlay[data-theme='dark'] .publication-primary{color:#222321!important}
:root[data-theme='light'] body.editorial-home :is(.storage-alert,.dialog-error,.template-feedback.is-error,.model-message.is-error),
:root[data-theme='light'] body:has(>.api-shell) :is(.api-error,.api-toast.is-error){color:#9B3223;border-color:#C18173}
:root[data-theme='dark'] body.editorial-home :is(.storage-alert,.dialog-error,.template-feedback.is-error),
:root[data-theme='dark'] body:has(>.api-shell) .api-error{color:#F1B4A5}
/* Flat reading surfaces replace decorative gradients; node categories retain
 * their small semantic accents without tinting all readable content. */
html body:has(>.api-shell) .welcome{background:var(--panel);background-image:none}
html body:has(>.api-shell) .welcome::before{display:none}
html .app[data-theme] .board-wrap{background:var(--bg);background-image:none}
html .app[data-theme] .wf-node{background:var(--panel);background-image:none}
/* Preserve iframe transparency; do not repaint the embedded API canvas. */
html.api-embed body:has(> .api-shell) { background: transparent; }