/* Content colors are independent of the user's canvas/accent choice.
   Stable business roles, not row position or randomized rainbow decoration. */
:root {
  --content-blue-ink:#285d7a;--content-blue-bg:#e8f2f8;--content-blue-soft:#d6e8f4;--content-blue-line:#b7d1e3;
  --content-amber-ink:#835a1e;--content-amber-bg:#fbf1dc;--content-amber-soft:#f3e3ba;--content-amber-line:#dec997;
  --content-green-ink:#326447;--content-green-bg:#e9f3e6;--content-green-soft:#d6e8cf;--content-green-line:#b9d1ae;
  --content-teal-ink:#2a6865;--content-teal-bg:#e5f3ef;--content-teal-soft:#cfe7e0;--content-teal-line:#a7ccc1;
  --content-rose-ink:#954b51;--content-rose-bg:#f9ebed;--content-rose-soft:#f0d8dc;--content-rose-line:#e1b9bf;
  --content-plum-ink:#715586;--content-plum-bg:#f1ebf7;--content-plum-soft:#e3d8ee;--content-plum-line:#cebddc;
  --content-slate-ink:#536478;--content-slate-bg:#edf0f5;--content-slate-soft:#dce3eb;--content-slate-line:#c3cdda;
}
:root[data-color-theme=dark] {
  --content-blue-ink:#a6cde8;--content-blue-bg:#263442;--content-blue-soft:#304454;--content-blue-line:#45627a;
  --content-amber-ink:#e9c382;--content-amber-bg:#3d3324;--content-amber-soft:#51432d;--content-amber-line:#76613f;
  --content-green-ink:#b2d5a2;--content-green-bg:#2c382b;--content-green-soft:#394a35;--content-green-line:#586e4f;
  --content-teal-ink:#9cd4c7;--content-teal-bg:#243935;--content-teal-soft:#304a43;--content-teal-line:#466e64;
  --content-rose-ink:#edb1b8;--content-rose-bg:#402c31;--content-rose-soft:#53383e;--content-rose-line:#7c505a;
  --content-plum-ink:#d0b5e5;--content-plum-bg:#352d40;--content-plum-soft:#483a57;--content-plum-line:#6a527d;
  --content-slate-ink:#c0cddb;--content-slate-bg:#2c323c;--content-slate-soft:#3a4552;--content-slate-line:#596b80;
}

/* Default information tone. Each module can select a role without recoloring its parent. */
:where(body,.ai-filters,.ws-gallery-toolbar,.ws-mail-filter,.ai-template-preview,.ai-review-specs,.intake-stats-history,.ws-notification-copy,.ws-app-symbol),
[data-content-tone=blue] {
  --content-ink:var(--content-blue-ink);--content-bg:var(--content-blue-bg);--content-soft:var(--content-blue-soft);--content-line:var(--content-blue-line);
}
:where(.ai-review-decision,.ai-comment-moderation,.ai-template-variables,.ws-review-feedback,.account-security-stack,#password-settings,.ws-compose-check,.ws-detail-management),
[data-content-tone=amber] {
  --content-ink:var(--content-amber-ink);--content-bg:var(--content-amber-bg);--content-soft:var(--content-amber-soft);--content-line:var(--content-amber-line);
}
:where(.ws-compose-publish,.intake-stats-current,.app-preview-catalog),
[data-content-tone=green] {
  --content-ink:var(--content-green-ink);--content-bg:var(--content-green-bg);--content-soft:var(--content-green-soft);--content-line:var(--content-green-line);
}
:where(#ai-host,#ai-runtime-service,.ai-review-gallery,.ws-file-zone,.ws-shot-zone,.ws-compose-apk,.ws-detail-overview,.account-mail-preferences,#email-settings),
[data-content-tone=teal] {
  --content-ink:var(--content-teal-ink);--content-bg:var(--content-teal-bg);--content-soft:var(--content-teal-soft);--content-line:var(--content-teal-line);
}
:where(.ws-comment-recovery,.ai-review-blockers),
[data-content-tone=rose] {
  --content-ink:var(--content-rose-ink);--content-bg:var(--content-rose-bg);--content-soft:var(--content-rose-soft);--content-line:var(--content-rose-line);
}
:where(#ai-comments,#ai-announcements,#ai-runtime-site,.ai-template-editor,.ai-comment-reading,.ai-user-identity,.ws-comment-thread,.ws-comment,#ws-own-comments,#ws-comments,.ws-uploader-chip,.ws-compose-description,.ws-introduction,.ws-detail-editor,.account-profile-panel,.profile-preferences,.admin-login-intro),
[data-content-tone=plum] {
  --content-ink:var(--content-plum-ink);--content-bg:var(--content-plum-bg);--content-soft:var(--content-plum-soft);--content-line:var(--content-plum-line);
}
:where(#ai-audit,.ai-comment-metadata,.account-sessions,.ws-record-meta),
[data-content-tone=slate] {
  --content-ink:var(--content-slate-ink);--content-bg:var(--content-slate-bg);--content-soft:var(--content-slate-soft);--content-line:var(--content-slate-line);
}

/* Compact metrics carry their meaning in text and icons as well as color. */
:root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-card,.ws-overview-card) {
  background:color-mix(in srgb,var(--content-bg) 22%,var(--ui-surface));border-color:color-mix(in srgb,var(--content-line) 55%,var(--ui-border));
  box-shadow:0 2px 8px rgb(18 42 33 / .045);
  transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s;
}
:root body.beui #admin-intake .ai-stat-card:focus-within,
:root body.beui #workspace .ws-overview-card:focus-visible {
  border-color:var(--content-ink);box-shadow:0 4px 14px rgb(18 42 33 / .08);
}
@media(hover:hover) and (pointer:fine) {
  :root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-card,.ws-overview-card):hover {
    background:color-mix(in srgb,var(--content-bg) 44%,var(--ui-surface));border-color:var(--content-line);
    box-shadow:0 6px 16px rgb(18 42 33 / .09);transform:translateY(-2px);
  }
}
@media(prefers-reduced-motion:reduce) {
  :root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-card,.ws-overview-card),
  :root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-card,.ws-overview-card):hover {transition:none;transform:none}
}
:root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-number,.ai-stat-card h3,.ai-stat-open,.ws-overview-label,.ws-overview-card>strong,.ws-overview-arrow) {color:var(--content-ink)}
:root body.beui :is(#workspace,#admin-intake) :is(.ai-stat-card h3,.ws-overview-label)::before {color:var(--content-ink)}

/* Charts preserve series semantics: one color for time, distinct colors for statuses. */
:root body.beui .intake-stats-panel {background:var(--surface-card-bg,var(--ui-surface));border-color:var(--surface-card-line,var(--ui-border));box-shadow:0 2px 10px rgb(18 42 33 / .04)}
:root body.beui .intake-stats-heading {border-color:var(--content-line)}
:root body.beui .intake-stats-heading h2::before {color:var(--content-ink)}
:root body.beui :is(.intake-stats-total,.intake-stats-panel .intake-stats-readout) {background:transparent;color:var(--content-ink)}
:root body.beui .intake-stats-total :is(strong,span) {color:var(--content-ink)}
:root body.beui :is(.intake-stats-bar,.intake-stats-area,.intake-stats-fill) {fill:var(--content-ink)}
:root body.beui :is(.intake-stats-line,.intake-stats-point) {stroke:var(--content-ink)}
:root body.beui .intake-stats-track {fill:var(--content-soft)}
:root body.beui .intake-stats-gridline {stroke:var(--content-line)}

/* Lists stay calm at scale; metadata, headings and filters supply separate layers. */
:root body.beui :is(#workspace,#admin-intake) :is(.ai-filters,.ws-mail-filter,.ai-section-nav,.ai-template-nav) {background:transparent;border-color:var(--ui-border)}
:root body.beui #admin-intake :is(.ai-data-table,.ai-comment-table) thead {background:var(--list-heading-bg,var(--ui-soft));color:var(--ui-muted)}
:root body.beui #admin-intake :is(.ai-data-table,.ai-comment-table) thead th {background:transparent;color:var(--content-slate-ink)}
:root body.beui #admin-intake :is(.ai-list-meta,.ai-comment-time,.ai-comment-app-id) {color:var(--ui-muted)}
:root body.beui #workspace :is(.ws-owned-meta,.ws-owned-package,.ws-owned-updated) {color:var(--content-slate-ink)}
:root body.beui #workspace .ws-gallery-cards .ws-app-symbol {background:var(--content-blue-soft);border-color:var(--content-blue-line);color:var(--content-blue-ink)}
:root body.beui #workspace :is(.ws-uploader-avatar,.ws-comment-avatar) {background:var(--content-plum-soft);color:var(--content-plum-ink)}
:root body.beui #workspace :is(.ws-uploader-badge,.ws-comment-author) {color:var(--content-plum-ink)}
:root body.beui #workspace .ws-uploader-badge {background:var(--content-plum-bg);border-color:var(--content-plum-line)}
:root body.beui #workspace .ws-app-card h2 a {color:var(--content-blue-ink)}
:root body.beui #workspace .ws-gallery-summary strong {color:var(--content-blue-ink)}

/* Detail, editing and configuration views: colored section accents, not edge strips. */
:root body.beui :is(#workspace,#admin-intake) :is(.ai-panel>h2,.ai-settings-heading h2,.ws-app-section h2,.ws-mail-overview h2,.ai-template-editor h3,.ai-comment-eyebrow,.ws-compose-panel h2) {color:var(--content-ink)}
:root body.beui #admin-intake :is(.ai-comment-moderation,.ai-comment-metadata,.ai-template-variables) {background:transparent;border-color:var(--ui-border)}
:root body.beui #admin-intake :is(.ai-review-specs,.ai-review-gallery,.ai-comment-reading,.ai-template-editor,.ai-template-preview) {border-color:var(--content-line)}
:root body.beui #admin-intake .ai-comment-avatar {background:var(--content-plum-soft);color:var(--content-plum-ink)}
:root body.beui #admin-intake .ai-comment-reading h2 {color:var(--content-plum-ink)}
:root body.beui #admin-intake :is(.ai-template-editor,.ai-template-preview)>.ai-heading {color:var(--content-ink);border-color:var(--content-line)}
:root body.beui #admin-intake .ai-settings-section>h2 {color:var(--content-ink)}
:root body.beui #admin-intake #ai-ann-form :is(label,legend) {color:var(--ui-fg)}
:root body.beui #admin-intake #ai-ann-form .ai-ann-form-footer {border-color:var(--ui-border)}
:root body.beui #admin-intake .ai-settings-section .ai-field-title {color:var(--content-teal-ink)}
:root body.beui #admin-intake :is(.ai-settings-section label,.ai-settings-section legend) {color:var(--ui-fg)}
:root body.beui #admin-intake .ai-dashboard-maintenance>.ai-panel {border-color:var(--content-line)}
:root body.beui #workspace :is(.ws-file-zone,.ws-shot-zone,.ws-review-feedback) {background:var(--content-bg);border-color:var(--content-line)}
:root body.beui #workspace :is(.ws-file-zone,.ws-shot-zone):hover {background:var(--content-soft)}
:root body.beui #workspace .ws-comment-child {background:transparent}
:root body.beui #workspace #ws-detail .ws-app-section:not(.ws-detail-overview) {background:transparent;border-color:var(--ui-border)}
:root body.beui #workspace #ws-detail :is(.ws-app-section h2,.ws-app-section h3,#ws-comments-title) {color:var(--content-ink)}
:root body.beui #workspace #ws-detail .ws-app-section h2::before {color:var(--content-ink)}
:root body.beui #workspace .app-preview-catalog {background:var(--surface-card-bg,var(--ui-surface));border-color:var(--surface-card-line,var(--ui-border))}
:root body.beui #workspace .app-preview-catalog-title {color:var(--content-green-ink)}
:root body.beui #workspace :is(.ws-notification-copy h2,.ws-notification-copy h3,.ws-notification-copy strong,.ws-comment-heading strong) {color:var(--content-ink)}
:root body.beui #workspace .ws-notification-delivery {color:var(--content-slate-ink)}
:root body.beui #workspace .ws-compose-panel h2::before {color:var(--content-ink)}
:root body.beui #workspace .ws-compose-description label {color:var(--content-ink)}
:root body.beui #workspace .ws-compose-description textarea {border-color:var(--content-line)}
:root body.beui #workspace #ws-compose-steps button:not([aria-current=step]) {color:var(--content-slate-ink);background:transparent}
:root body.beui #workspace :is(.ws-avatar-editor,.ws-avatar-current) h2 {color:var(--content-plum-ink)}
:root body.beui #workspace .ws-avatar-previews {background:var(--content-teal-bg);border-color:var(--content-teal-line)}

/* Account remains a settings sheet rather than a pile of colored cards. */
:root body.beui.account-page :is(.account-panel-heading h2,.account-session-heading h2,.profile-preferences legend,.account-setting-summary strong) {color:var(--content-ink)}
:root body.beui.account-page .account-disclosure-action {background:var(--content-bg);color:var(--content-ink)}
:root body.beui.account-page :is(.account-intent,.security-target) {background:var(--content-blue-bg);color:var(--content-blue-ink);border-color:var(--content-blue-line)}
:root body.beui.account-page .account-identity-mark {background:var(--content-plum-soft);color:var(--content-plum-ink);border-color:var(--content-plum-line)}
:root body.beui.account-page .auth-tabs {gap:16px;padding:0;margin-bottom:24px;border:0;border-bottom:1px solid var(--ui-border);border-radius:0;background:transparent}
:root body.beui.account-page .auth-tabs button {flex:0 1 auto;min-width:108px;padding:0 8px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--ui-muted);font-weight:500}
:root body.beui.account-page .auth-tabs button:is(:hover,[aria-current=page]) {background:transparent;color:var(--ui-fg)}
:root body.beui.account-page .auth-tabs button[aria-current=page] {border-bottom-color:var(--accent-ui);font-weight:700}
:root body.beui.account-page .password-field {position:relative;display:block}
:root body.beui.account-page .password-field input {width:100%;padding-right:78px}
:root body.beui.account-page .password-field #toggle-password {position:absolute;inset:0 0 auto auto;min-width:72px;height:44px;min-height:44px;padding:0 8px;border-radius:0 7px 7px 0;color:var(--ui-muted);font-size:12px}
:root body.beui.account-page .password-field #toggle-password:hover {background:var(--ui-soft);color:var(--ui-fg);text-decoration:none}
@media(max-width:480px) {:root body.beui.account-page .auth-tabs button {flex:1;min-width:0}}
:root body.beui.account-page .auth-assistance .text-button {color:var(--content-blue-ink)}
:root body.beui.account-page .account-registration-steps {background:var(--content-teal-bg);color:var(--content-teal-ink)}
:root body.beui.admin-login-page .admin-login-intro {background:var(--content-bg);border-color:var(--content-line)}
:root body.beui.admin-login-page .admin-login-emblem {background:var(--content-soft);color:var(--content-ink);border-color:var(--content-line)}
:root body.beui.admin-login-page .admin-login-boundary {color:var(--content-ink);border-color:var(--content-line)}
:root body.beui.admin-login-page .admin-login-card h2::before {color:var(--content-teal-ink)}

/* Feedback is independent of custom brand colors, in BOTH color modes. */
:root[data-color-theme] body.beui :is(input,textarea)::placeholder {color:var(--ui-muted);opacity:1}
:root[data-color-theme] body.beui :is(#workspace,#admin-intake,#account-shell,.admin-login-layout) :is(input,textarea,select)[aria-invalid=true] {
  /* The shared native-input rule consumes these tokens at higher specificity. */
  --ui-border-strong:var(--content-rose-ink);--ui-surface:var(--content-rose-bg);
  border-color:var(--content-rose-ink);background-color:var(--content-rose-bg);outline-color:var(--content-rose-ink);
}
:root body.beui :is(.badge.green,.ai-badge.green,[data-tone=success]) {background:var(--content-green-bg);color:var(--content-green-ink);border-color:var(--content-green-line)}
:root body.beui :is(.badge.amber,.ai-badge.amber,[data-tone=pending]) {background:var(--content-amber-bg);color:var(--content-amber-ink);border-color:var(--content-amber-line)}
:root body.beui :is(.badge.red,.ai-badge.red,[data-tone=attention],.form-error) {background:var(--content-rose-bg);color:var(--content-rose-ink);border-color:var(--content-rose-line)}
:root body.beui :is(.badge.blue,.ai-badge.blue,.notice) {background:var(--content-blue-bg);color:var(--content-blue-ink);border-color:var(--content-blue-line)}
:root body.beui :is(.badge.neutral,.ai-badge.neutral) {background:var(--content-slate-bg);color:var(--content-slate-ink);border-color:var(--content-slate-line)}
:root body.beui #admin-intake .ai-state {background:var(--content-bg);color:var(--content-ink);border-color:var(--content-line)}
:root body.beui #admin-intake :is(.ai-comment-state-value,.ai-connection-badge) {background:var(--content-bg);color:var(--content-ink);border-color:var(--content-line)}
:root body.beui #admin-intake .ai-save-status[data-state=saved] {color:var(--content-green-ink)}
:root body.beui #admin-intake .ai-save-status[data-state=dirty] {color:var(--content-amber-ink)}
:root body.beui #admin-intake .ai-save-status[data-state=error] {color:var(--content-rose-ink)}
:root body.beui #admin-intake .ai-user-verification {color:var(--content-ink)}
:root body.beui #admin-intake .ai-user-verification::before {background:var(--content-ink)}
:root body.beui :is(.button.danger,.button.destructive,button[data-tone=attention]) {background:var(--content-rose-bg);color:var(--content-rose-ink);border-color:var(--content-rose-line)}
:root body.beui :is(.button.danger,.button.destructive,button[data-tone=attention]):hover:not(:disabled) {background:var(--content-rose-soft)}
:root body.beui #admin-intake .button.ai-danger:not(:disabled),
:root body.beui #workspace .ws-danger-action:not(:disabled) {background:var(--content-rose-bg);color:var(--content-rose-ink);border-color:var(--content-rose-line)}
:root body.beui #admin-intake .button.ai-danger:hover:not(:disabled),
:root body.beui #workspace .ws-danger-action:hover:not(:disabled) {background:var(--content-rose-soft)}