/* Appearance layer for the port-5194 POC only. Brand navy stays navy;
   foreground, action and elevation roles change independently. */
:root {
  --page: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #0b2545;
  --text-secondary: #476184;
  --control-line: #94a3b8;
  --action: #2563eb;
  --action-hover: #1d4ed8;
  --on-action: #ffffff;
  --focus: #2563eb;
  --blue-soft: #eef5ff;
  --green-soft: #effbf5;
  --violet-soft: #f4f0ff;
  --amber-soft: #fffaee;
  --rose-soft: #fff0f3;
  --teal-soft: #ecfafb;
  --green-ink: #047857;
  --violet-ink: #6246d0;
  --amber-ink: #805706;
  --rose-ink: #b33456;
  --teal-ink: #107481;
  --warning-surface: #fff7ed;
  --warning-text: #9a3412;
  --danger: #b91c1c;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0f1c2e;
  --canvas: #0b1525;
  --surface: #14243a;
  --surface-raised: #1b304c;
  --subtle: #1c304b;
  --text: #e8eff9;
  --ink: #e8eff9;
  --text-secondary: #b7c6dc;
  --muted: #acb9cd;
  --line: #31445e;
  --control-line: #657e9e;
  --blue: #91b8ff;
  --focus: #a5c8ff;
  --success: #75debc;
  --blue-soft: #1b3557;
  --green-soft: #163b35;
  --violet-soft: #30264b;
  --amber-soft: #3d301d;
  --rose-soft: #412436;
  --teal-soft: #163b44;
  --green-ink: #75debc;
  --violet-ink: #c7b6ff;
  --amber-ink: #f3ce82;
  --rose-ink: #ffadc2;
  --teal-ink: #80dce8;
  --guide-blue-soft: var(--blue-soft);
  --guide-green-soft: var(--green-soft);
  --warning-surface: #3c2d1d;
  --warning-text: #ffd194;
  --danger: #b91c1c;
  background: var(--page);
  color: var(--text);
  scrollbar-color: var(--control-line) var(--canvas);
}

.appearance-picker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  flex-shrink: 0;
}
.appearance-picker select {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 11px;
  border-color: var(--control-line);
  background: var(--surface);
  color: var(--text);
}
.brand .brand-mark-dark { display: none; }
html[data-theme="dark"] .brand .brand-mark-light { display: none; }
html[data-theme="dark"] .brand .brand-mark-dark { display: block; }

/* Native dialogs, fields, selections and focus are part of the theme too. */
html[data-theme="dark"] ::selection {
  background: #355f97;
  color: #ffffff;
}
html[data-theme="dark"] :is(button, a, input, select, textarea, summary):focus-visible {
  outline-color: var(--focus);
}
html[data-theme="dark"] :is(.choice-check, .business-choice):has(input:focus-visible) {
  outline-color: var(--focus);
}
html[data-theme="dark"] :is(input, select, textarea) {
  background: var(--canvas);
  color: var(--text);
  border-color: var(--control-line);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); }
html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--action);
}
html[data-theme="dark"] .dialog {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--control-line);
  box-shadow: 0 24px 80px #00000070;
}
html[data-theme="dark"] .dialog::backdrop { background: #030914ba; }

/* Public cards, workspace panels and navigation share elevation roles. */
html[data-theme="dark"] :is(
  .site-header, .public-nav, .provider-card, .product-card, .quote-card,
  .profile-intro, .profile-section, .portfolio-card, .workspace-topbar,
  .health-card, .metric, .workspace-panel, .quick-actions > a,
  .listing-row, .edit-layout, .workspace-content .guide-form,
  .account-form, .flow-panel, .skeleton-card, .review-card
) {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.profile-page, .workspace) { background: var(--canvas); }
html[data-theme="dark"] :is(.preview-bar, .company-facts, .rating-summary, .edit-steps, .contact-channels) {
  background: var(--page);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.trust-card, .verified-card, .comparison-tray) {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: 0 8px 28px #00000030;
}
html[data-theme="dark"] .search-field {
  background: var(--canvas);
  border-color: var(--control-line);
  color: var(--muted);
}
html[data-theme="dark"] .search-field input { background: transparent; }
html[data-theme="dark"] :is(.inner-panel, .detail-layout > img, .workspace-search) {
  border-color: var(--line);
}
html[data-theme="dark"] :is(.proof-stats > div, .contact-channels button, .contact-channels button + button) {
  border-color: var(--line);
}
html[data-theme="dark"] .mark.large { border-color: var(--surface); }
/* Uploaded/sample company logos retain their own white backing and artwork. */
html[data-theme="dark"] .sidebar-open .workspace-menu {
  background: var(--surface-raised);
  color: var(--text);
}

/* Foregrounds: no light-theme navy or muted blue text on a dark surface. */
html[data-theme="dark"] :is(
  .outline, .avatar, .preview-bar a, .category span, .rating strong,
  .company-facts strong, .product-provider strong,
  .choice-check:has(input:checked)
) { color: var(--text); }
html[data-theme="dark"] :is(
  .hero-copy p, .profile-summary > p, .profile-section p, .check-list li,
  .proof-copy > p, .quote-card blockquote, .draft-banner span
) { color: var(--text-secondary); }
html[data-theme="dark"] :is(
  .sample-caption, .preview-bar, .trust-card small, .section-heading p,
  .card-description, .works-with, .rating, .help-card p, .step p,
  .proof-stats small, .quote-author small, .page-intro p, .select-field span,
  .result-count, .empty, .breadcrumb, .verified-card small,
  .profile-tabs button, .company-facts dt, .rating-summary small,
  .contact-channels small, .workspace-search, .workspace-demo-note,
  .workspace-heading p, .health-card small, .metric > span, .metric:last-child small,
  .activity small, .activity p, .top-listing small, .quick-actions small,
  .listing-info p, .listing-row > div:not(.listing-info) small,
  .edit-steps > span, .listing-form p, .contact-preview > p,
  .trend-chart details, .donut small
) { color: var(--muted); }
html[data-theme="dark"] :is(
  .hero-copy h1 span, .hero-note, .help-illustration, .step-number,
  .proof-copy h2 span, .proof-copy > .sample-caption:first-child,
  .quote-card > svg, .breadcrumb a, .profile-tabs button:first-child,
  .profile-tabs button:hover, .contact-channels svg, .health-card div > span,
  .panel-title a, .top-listing:hover, .quick-actions > a > svg:first-child,
  .edit-steps > span.selected, .query-list svg,
  .notification-panel .activity .icon-button, .contact-preview-options svg
) { color: var(--blue); }
html[data-theme="dark"] .quote-card > svg { fill: var(--blue); }

/* Action fill is deliberately separate from the brighter blue link color. */
html[data-theme="dark"] :is(.primary, .blue-button, .skip-link) {
  background: var(--action);
  color: var(--on-action);
}
html[data-theme="dark"] :is(.primary, .blue-button):hover { background: var(--action-hover); }
html[data-theme="dark"] .outline {
  background: var(--surface);
  border-color: var(--control-line);
}
html[data-theme="dark"] .outline:hover {
  background: var(--subtle);
  border-color: var(--blue);
}
html[data-theme="dark"] .icon-button:hover { background: var(--subtle); }
html[data-theme="dark"] .avatar { background: var(--subtle); }
html[data-theme="dark"] .sidebar-account .avatar { color: var(--text); }
html[data-theme="dark"] .filter-tabs button {
  background: var(--subtle);
  color: var(--text-secondary);
}
html[data-theme="dark"] .filter-tabs button.selected {
  background: var(--action);
  color: var(--on-action);
}
html[data-theme="dark"] .flow-steps .reached > span {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}
html[data-theme="dark"] :is(.choice-check, .business-choice) { border-color: var(--control-line); }
html[data-theme="dark"] :is(.choice-check:has(input:checked), .business-choice.selected, .business-choice:hover) {
  border-color: var(--blue);
}

/* Keep the original compositions, with composed navy surfaces, not inversion. */
html[data-theme="dark"] .home-hero {
  background: linear-gradient(115deg, #14243a 0%, #132943 50%, #1b3557 100%);
}
html[data-theme="dark"] .profile-hero {
  background: linear-gradient(120deg, #14243a 25%, #1b3557 68%, #172b45);
}
html[data-theme="dark"] .hero-visual:after {
  background: linear-gradient(0deg, #10213935, transparent 45%);
}
html[data-theme="dark"] :is(.help-card, .how-section) { background: var(--blue-soft); }
html[data-theme="dark"] .help-illustration > svg:last-child { background: var(--blue-soft); }
html[data-theme="dark"] :is(.contact-banner, .message-bubble) { background: var(--blue-soft); }
html[data-theme="dark"] .contact-banner .icon-tile { background: var(--surface-raised); }
html[data-theme="dark"] :is(.portfolio-image, .project-1, .project-2) { background: var(--subtle); }
html[data-theme="dark"] .portfolio-card:hover { border-color: var(--control-line); }
html[data-theme="dark"] .step-arrow { color: var(--muted); }
html[data-theme="dark"] :is(.tags span, .tag) {
  background: var(--subtle);
  color: var(--text-secondary);
}

/* Category and status colors remain meaningful and readable in both themes. */
html[data-theme="dark"] .blue:not(.mark) { background: var(--blue-soft); color: var(--blue); }
html[data-theme="dark"] .violet:not(.mark) { background: var(--violet-soft); color: var(--violet-ink); }
html[data-theme="dark"] .green:not(.mark) { background: var(--green-soft); color: var(--green-ink); }
html[data-theme="dark"] .amber:not(.mark) { background: var(--amber-soft); color: var(--amber-ink); }
html[data-theme="dark"] .rose:not(.mark) { background: var(--rose-soft); color: var(--rose-ink); }
html[data-theme="dark"] .teal:not(.mark) { background: var(--teal-soft); color: var(--teal-ink); }
html[data-theme="dark"] .slate:not(.mark) { background: var(--subtle); color: var(--muted); }
html[data-theme="dark"] :is(.step:nth-child(2) .step-number, .check-list svg, .health-card strong, .metric small) { color: var(--green-ink); }
html[data-theme="dark"] .step:nth-child(3) .step-number { color: var(--violet-ink); }
html[data-theme="dark"] .step:nth-child(4) .step-number { color: var(--teal-ink); }
html[data-theme="dark"] :is(.status-badge.draft, .status-pill) {
  background: var(--subtle);
  color: var(--text-secondary);
}
html[data-theme="dark"] :is(.verified, .status-badge.active, .status-pill.active, .status-pill.closed, .guide-form .success-note) {
  background: var(--green-soft);
  color: var(--green-ink);
}
html[data-theme="dark"] :is(.status-pill.new, .status-pill.progress) {
  background: var(--blue-soft);
  color: var(--blue);
}
html[data-theme="dark"] .status-pill.contacted {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
html[data-theme="dark"] :is(.warning, .storage-banner) {
  background: var(--warning-surface);
  color: var(--warning-text);
}
html[data-theme="dark"] .danger-button { background: var(--danger); color: var(--on-action); }
html[data-theme="dark"] .danger-button:hover { background: #991b1b; }
html[data-theme="dark"] .stars { color: #f3ce82; }
html[data-theme="dark"] .health-ring { color: var(--green-ink); border-inline-start-color: var(--green-soft); }
html[data-theme="dark"] .notification-panel .activity { border-color: var(--line); }
html[data-theme="dark"] .notification-panel .activity.unread { background: var(--subtle); }
html[data-theme="dark"] .skeleton-card > span { background: var(--line); }
html[data-theme="dark"] progress::-webkit-progress-bar { background: var(--subtle); }
html[data-theme="dark"] progress::-webkit-progress-value { background: var(--blue); }
html[data-theme="dark"] progress::-moz-progress-bar { background: var(--blue); }
html[data-theme="dark"] .sample-bar-chart span { background: var(--blue); }
html[data-theme="dark"] .donut > div { background: var(--surface); }

@media (max-width: 600px) {
  .appearance-picker select, .state-picker select { min-height: 44px; font-size: 12px; }
  .preview-bar nav { width: 100%; gap: 10px 14px; }
}