/* Palette definitions also supply previews and invariant success colors. */
:root {
  --appearance-default: #0f5c4c;
  --appearance-default-tint: #e7f0ec;
  --appearance-rose: #98536a;
  --appearance-rose-dark: #794154;
  --appearance-rose-tint: #f5e9ed;
  --appearance-blue: #315f91;
  --appearance-blue-dark: #24486f;
  --appearance-blue-tint: #e8eff7;
  /* Preserve Default's decorative colors; alternative accents override these. */
  --brand-surface: #f7fbf9;
  --brand-border: #afc8bf;
  --brand-line: #b7c9c1;
  --brand-note-border: #c8ddd3;
  --brand-card-hover-border: #bfd0c9;
  --brand-track: #dfe9e4;
  --brand-decoration: #b9d7cd;
  --brand-on-accent: #c5ded6;
}

html[data-theme="rose"] {
  --bg: #f8f5f6;
  --ink: #211b1e;
  --line: #e7dde1;
  --green: var(--appearance-rose);
  --green-dark: var(--appearance-rose-dark);
  --tint: var(--appearance-rose-tint);
}

html[data-theme="blue"] {
  --bg: #f4f7fa;
  --ink: #17202a;
  --line: #dce4ec;
  --green: var(--appearance-blue);
  --green-dark: var(--appearance-blue-dark);
  --tint: var(--appearance-blue-tint);
}

html:is([data-theme="rose"], [data-theme="blue"]) {
  --brand-surface: color-mix(in srgb, var(--tint) 35%, var(--card));
  --brand-border: color-mix(in srgb, var(--green) 35%, var(--card));
  --brand-line: color-mix(in srgb, var(--green) 30%, var(--card));
  --brand-note-border: color-mix(in srgb, var(--green) 25%, var(--card));
  --brand-card-hover-border: color-mix(in srgb, var(--green) 28%, var(--card));
  --brand-track: var(--tint);
  --brand-decoration: var(--tint);
  --brand-on-accent: var(--tint);
}

/* These selectors deliberately outrank the legacy inline stylesheet.
   Permission/success surfaces are excluded: their green remains semantic. */
:root :is(.upload-box, .files-drop, .file-badge, .preview-surface,
  .insight-summary div, .btn-secondary:hover, .task-card:focus-within,
  .file-row:focus-within, .workflow-card:focus-within, .usage-box,
  .member-detail-stat, .pricing-demo-note, .billing-item,
  .pricing-modal .selected-plan, .auth-demo-note, .security-role-banner) {
  background: var(--brand-surface);
}

:root :is(.upload-box, .files-drop) {
  border-color: var(--brand-border);
}

:root :is(.file-badge, .flow-arrow, .btn-secondary:hover) {
  border-color: var(--brand-line);
}

:root :is(.pricing-demo-note, .auth-demo-note, .security-role-banner) {
  border-color: var(--brand-note-border);
}

:root .int-card:hover {
  border-color: var(--brand-card-hover-border);
}

:root .usage-track {
  background: var(--brand-track);
}

:root .dot {
  background: var(--brand-decoration);
}

:root :is(.hero-visual, .auth-side) .eyebrow {
  /* Legacy templates have inline sage text colors. */
  color: var(--brand-decoration) !important;
}

:root :is(.auth-side p, .auth-art) {
  color: var(--brand-on-accent);
}

:root :is(.hero-visual, .dashboard-hero, .auth-side)
  :where(button, a, input, textarea, select):focus-visible {
  outline-color: #fff;
}

.member-permissions button.is-allowed span {
  color: var(--appearance-default);
}

html:is([data-theme="rose"], [data-theme="blue"]) .hero-visual .dot {
  background: var(--tint);
}

html[data-theme="rose"] .hero-visual,
html[data-theme="rose"] .dashboard-hero,
html[data-theme="rose"] .auth-side {
  background-color: var(--green);
}

html[data-theme="blue"] .hero-visual,
html[data-theme="blue"] .dashboard-hero,
html[data-theme="blue"] .auth-side {
  background-color: var(--green);
}

html[data-theme="rose"] .side-nav button.active,
html[data-theme="rose"] .side-nav button:hover,
html[data-theme="blue"] .side-nav button.active,
html[data-theme="blue"] .side-nav button:hover {
  box-shadow: inset 3px 0 var(--green);
}

html[data-theme="rose"] .upload-box,
html[data-theme="rose"] .files-drop,
html[data-theme="rose"] .file-badge,
html[data-theme="blue"] .upload-box,
html[data-theme="blue"] .files-drop,
html[data-theme="blue"] .file-badge {
  border-color: var(--green);
}

html[data-theme="rose"] .support-status[data-kind="success"],
html[data-theme="blue"] .support-status[data-kind="success"] {
  background: var(--appearance-default-tint);
  color: var(--appearance-default);
  border-color: #c8ddd4;
}

/* Success communicates an outcome, not the user's selected accent. */
.activity-row:not(.review) .activity-mark {
  color: var(--appearance-default);
  background: var(--appearance-default-tint);
}

html[data-theme="rose"] .pill-green,
html[data-theme="blue"] .pill-green {
  background: var(--appearance-default-tint);
  color: var(--appearance-default);
}

html[data-theme="rose"] .progress-row.done,
html[data-theme="blue"] .progress-row.done,
html[data-theme="rose"] .status-good,
html[data-theme="blue"] .status-good,
html[data-theme="rose"] .int-status.connected,
html[data-theme="blue"] .int-status.connected,
html[data-theme="rose"] .demo-step.is-done,
html[data-theme="blue"] .demo-step.is-done,
html[data-theme="rose"] .run-line.done,
html[data-theme="blue"] .run-line.done {
  color: var(--appearance-default);
}

html:is([data-theme="rose"], [data-theme="blue"]) .status-good {
  color: var(--appearance-default) !important;
}

html[data-theme="rose"] .done .check,
html[data-theme="blue"] .done .check,
html[data-theme="rose"] .is-done .demo-step-mark,
html[data-theme="blue"] .is-done .demo-step-mark {
  background: var(--appearance-default);
  border-color: var(--appearance-default);
  color: #fff;
}

html[data-theme="rose"] .int-status.connected:before,
html[data-theme="blue"] .int-status.connected:before {
  background: var(--appearance-default);
}

html[data-theme="rose"] .run-line.done .run-dot,
html[data-theme="blue"] .run-line.done .run-dot {
  border-color: var(--appearance-default);
  background: var(--appearance-default-tint);
}

html[data-theme="rose"] .support-status[data-kind="success"] *,
html[data-theme="blue"] .support-status[data-kind="success"] * {
  color: inherit;
}

.appearance-panel h2 {
  margin-top: 6px;
}

.appearance-description {
  margin: 8px 0 17px;
  font-size: 13px;
}

.appearance-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.appearance-option {
  min-width: 0;
  min-height: 96px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.appearance-option:hover {
  border-color: var(--green);
}

.appearance-option.is-selected {
  background: color-mix(in srgb, var(--tint) 52%, var(--card));
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.appearance-option input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--green);
}

.appearance-option input:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.appearance-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.35;
}

.appearance-option-copy strong {
  font-size: 13px;
}

.appearance-selected {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

.appearance-selected[hidden] {
  display: none;
}

.appearance-swatches {
  display: flex;
  gap: 4px;
  margin: auto 0 0 auto;
  padding-top: 9px;
  --swatch: var(--appearance-default);
  --swatch-tint: var(--appearance-default-tint);
}

[data-theme-option="rose"] .appearance-swatches {
  --swatch: var(--appearance-rose);
  --swatch-tint: var(--appearance-rose-tint);
}

[data-theme-option="blue"] .appearance-swatches {
  --swatch: var(--appearance-blue);
  --swatch-tint: var(--appearance-blue-tint);
}

.appearance-swatches .swatch-tint {
  background: var(--swatch-tint);
}

.appearance-swatches i {
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(22, 26, 24, .1);
  border-radius: 50%;
  background: var(--swatch);
}

.appearance-swatches .swatch-paper {
  background: #fff;
}

@media (max-width: 520px) {
  .appearance-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .appearance-option {
    min-height: 66px;
    align-items: center;
  }

  .appearance-swatches {
    margin: 0 0 0 auto;
    padding: 0;
  }
}