/*
 * Steel gray and yellow theme: readability rules from the audits of 2026-10-09.
 *
 * Two decisions shape this file:
 *  - The grays sit one step darker than first drawn, so that white and the
 *    theme's yellow both reach a readable contrast on the page and on cards.
 *  - This theme has no cream or pastel boxes. Every notice, chip, and badge
 *    that other themes paint light is painted here as a tint of the theme's
 *    own gray. Other themes are untouched.
 */

/* One step darker: yellow needs a gray this deep to reach 4.5 to 1. */
:root[data-theme="light"][data-visual-theme="roadster"] {
  --canvas: #525a66;
  --surface: #5a6371;
  --surface-subtle: #4f5762;
  --brand-soft: #48505b;
  --navy: #525a66;
  --muted: #f8fafc;
  --danger: #fee2e2;
  --brand-gradient: linear-gradient(180deg, #5a6371 0%, #525a66 52%, #48505b 100%);
  --theme-row-hover: #4f5762;
  --theme-metric-soft: #4f5762;
  --theme-scale-bg: #525a66;
  --roadster-surface-dim: #525a66;
  --roadster-surface-low: #566070;
  --roadster-surface-container: #4f5762;
  --roadster-surface-high: #48505b;
  --roadster-surface-highest: #48505b;
  --roadster-surface-variant: #4f5762;
  /* Tints of the theme's gray, used where other themes use cream, mint, rose, or pale blue. */
  --roadster-tint-warn: color-mix(in srgb, #fde047 15%, #48505b);
  --roadster-tint-warn-line: color-mix(in srgb, #fde047 45%, #48505b);
  --roadster-tint-good: color-mix(in srgb, #4ade80 15%, #48505b);
  --roadster-tint-good-line: color-mix(in srgb, #4ade80 45%, #48505b);
  --roadster-tint-bad: color-mix(in srgb, #f87171 20%, #48505b);
  --roadster-tint-bad-line: color-mix(in srgb, #f87171 50%, #48505b);
  --roadster-tint-plain: #48505b;
}
:root[data-theme="light"][data-visual-theme="roadster"] .topbar {
  background: rgba(82, 90, 102, .95);
}
:root[data-theme="light"][data-visual-theme="roadster"] .evaluation-workflow,
:root[data-theme="light"][data-visual-theme="roadster"] .anonymous-report-page {
  background: var(--canvas);
}
:root[data-theme="light"][data-visual-theme="roadster"] .progress-track,
:root[data-theme="light"][data-visual-theme="roadster"] .inline-progress {
  background: var(--surface-subtle);
}
:root[data-theme="light"][data-visual-theme="roadster"] .tab.is-active,
:root[data-theme="light"][data-visual-theme="roadster"] .rating-option input:hover + span,
:root[data-theme="light"][data-visual-theme="roadster"] .button-secondary:hover,
:root[data-theme="light"][data-visual-theme="roadster"] .button-ghost:hover,
:root[data-theme="light"][data-visual-theme="roadster"] .page-button:hover,
:root[data-theme="light"][data-visual-theme="roadster"] .icon-button:hover,
:root[data-theme="light"][data-visual-theme="roadster"] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme="light"][data-visual-theme="roadster"] select:focus,
:root[data-theme="light"][data-visual-theme="roadster"] textarea:focus {
  background: var(--brand-soft);
}
/* These rules hard-coded the light variant's grays, so the dark variant inherited them. */
:root[data-theme="dark"][data-visual-theme="roadster"] .tab.is-active,
:root[data-theme="dark"][data-visual-theme="roadster"] .rating-option input:hover + span {
  background: var(--brand-soft);
}
:root[data-theme="dark"][data-visual-theme="roadster"] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme="dark"][data-visual-theme="roadster"] select:focus,
:root[data-theme="dark"][data-visual-theme="roadster"] textarea:focus {
  background: var(--surface-subtle);
}

/*
 * HR pages tint their boxes by mixing the accent into white. Here the accent
 * is mixed into the theme's own gray instead.
 */
:root[data-theme="light"][data-visual-theme="roadster"] .contract-page {
  --contract-tint: color-mix(in srgb, #fde047 8%, #48505b);
  --contract-tint-strong: color-mix(in srgb, #fde047 16%, #48505b);
}
:root[data-theme="dark"][data-visual-theme="roadster"] .contract-page {
  --contract-tint: color-mix(in srgb, #fde021 7%, #1d2023);
  --contract-tint-strong: color-mix(in srgb, #fde021 14%, #1d2023);
}

/* No cream or pastel boxes in this theme: warnings. */
:root[data-theme="light"][data-visual-theme="roadster"] .contract-state-note--draft,
:root[data-theme="light"][data-visual-theme="roadster"] .record-missing,
:root[data-theme="light"][data-visual-theme="roadster"] .insight-attention a,
:root[data-theme="light"][data-visual-theme="roadster"] .alert-warning,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-status--draft,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-status--expiring,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--expiring,
:root[data-theme="light"][data-visual-theme="roadster"] .attendance-flag,
:root[data-theme="light"][data-visual-theme="roadster"] .record-missing a,
:root[data-theme="light"][data-visual-theme="roadster"] .record-missing span,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-remaining,
:root[data-theme="light"][data-visual-theme="roadster"] .badge-warning,
:root[data-theme="light"][data-visual-theme="roadster"] .place-count-wait,
:root[data-theme="light"][data-visual-theme="roadster"] .stat-icon-warning {
  border-color: var(--roadster-tint-warn-line);
  background: var(--roadster-tint-warn);
  color: #fef08a;
}
:root[data-theme="light"][data-visual-theme="roadster"] .contract-state-note--draft *,
:root[data-theme="light"][data-visual-theme="roadster"] .record-missing > strong,
:root[data-theme="light"][data-visual-theme="roadster"] .record-missing > p,
:root[data-theme="light"][data-visual-theme="roadster"] .insight-attention a *,
:root[data-theme="light"][data-visual-theme="roadster"] .alert-warning *,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-remaining * {
  color: #fef9c3;
}
:root[data-theme="dark"][data-visual-theme="roadster"] .contract-remaining,
:root[data-theme="dark"][data-visual-theme="roadster"] .contract-remaining * {
  color: #6b4708;
}

/* No cream or pastel boxes in this theme: good news. */
:root[data-theme="light"][data-visual-theme="roadster"] .badge-success,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-status--active,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-status--published,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--valid,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-change--up,
:root[data-theme="light"][data-visual-theme="roadster"] .attendance-flag--good,
:root[data-theme="light"][data-visual-theme="roadster"] .stat-icon-success,
:root[data-theme="light"][data-visual-theme="roadster"] .alert-success,
:root[data-theme="light"][data-visual-theme="roadster"] .evaluation-workflow-year-complete__mark {
  border-color: var(--roadster-tint-good-line);
  background: var(--roadster-tint-good);
  color: #bbf7d0;
}
:root[data-theme="light"][data-visual-theme="roadster"] .alert-success *,
:root[data-theme="light"][data-visual-theme="roadster"] .evaluation-workflow__prior {
  color: #dcfce7;
}

/* No cream or pastel boxes in this theme: late, expired, refused. */
:root[data-theme="light"][data-visual-theme="roadster"] .place-count-late,
:root[data-theme="light"][data-visual-theme="roadster"] .badge-danger,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--expired,
:root[data-theme="light"][data-visual-theme="roadster"] .record-overdue,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-change--down,
:root[data-theme="light"][data-visual-theme="roadster"] .attendance-flag--danger {
  border-color: var(--roadster-tint-bad-line);
  background: var(--roadster-tint-bad);
  color: #fee2e2;
}

/* No cream or pastel boxes in this theme: neutral chips, notices, and avatars. */
:root[data-theme="light"][data-visual-theme="roadster"] .badge-neutral,
:root[data-theme="light"][data-visual-theme="roadster"] .badge-info,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-status--expired,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--replaced,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--archived,
:root[data-theme="light"][data-visual-theme="roadster"] .record-status--no_expiry,
:root[data-theme="light"][data-visual-theme="roadster"] .attendance-flag--plain,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-field-chip,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-preview-notice,
:root[data-theme="light"][data-visual-theme="roadster"] .stat-icon-info,
:root[data-theme="light"][data-visual-theme="roadster"] .avatar {
  border-color: var(--line);
  background: var(--roadster-tint-plain);
  color: #fff;
}
:root[data-theme="light"][data-visual-theme="roadster"] .contract-preview-notice * {
  color: #fff;
}
:root[data-theme="light"][data-visual-theme="roadster"] .avatar,
:root[data-theme="light"][data-visual-theme="roadster"] .state-icon,
:root[data-theme="light"][data-visual-theme="roadster"] .state-icon.success {
  background: var(--roadster-tint-plain);
  color: var(--brand);
}
:root[data-theme="dark"][data-visual-theme="roadster"] .state-icon,
:root[data-theme="dark"][data-visual-theme="roadster"] .state-icon.success {
  color: #1d4ed8;
}

/* Yellow fills carry the theme's dark text. The dark variant paints the active page blue, so it stays white there. */
:root[data-theme="light"][data-visual-theme="roadster"] .contract-directory-pagination {
  --pagination-on-active: var(--roadster-on-brand);
}
:root[data-theme="light"][data-visual-theme="roadster"] .contract-template-banner-icon,
:root[data-theme="light"][data-visual-theme="roadster"] .alert-info .alert-icon {
  background: var(--brand);
}
:root[data-theme="light"][data-visual-theme="roadster"] .executive-period-link.is-active,
:root[data-theme="light"][data-visual-theme="roadster"] .executive-period-link.is-active *,
:root[data-visual-theme="roadster"] .annual-formula strong small,
:root[data-visual-theme="roadster"] .contract-template-banner-icon,
:root[data-visual-theme="roadster"] .alert-info .alert-icon,
:root[data-visual-theme="roadster"] .alert-success .alert-icon,
:root[data-visual-theme="roadster"] .complete > span {
  color: var(--roadster-on-brand);
}

/* White on pink: the notification counter and the danger buttons. */
:root[data-visual-theme="roadster"] .notification-count {
  background: #be123c;
  color: #fff;
}
:root[data-theme="light"][data-visual-theme="roadster"] .button-danger,
:root[data-theme="light"][data-visual-theme="roadster"] .button.button-danger {
  background: #be123c;
  border-color: #be123c;
  color: #fff;
}
:root[data-theme="light"][data-visual-theme="roadster"] .button-danger:hover {
  background: #9f1239;
  border-color: #9f1239;
}

/* Sheets that stay white in every theme keep dark text, and their gray notes are a shade deeper here. */
:root[data-visual-theme="roadster"] #contract-preview-paper h1,
:root[data-visual-theme="roadster"] #contract-preview-paper h2,
:root[data-visual-theme="roadster"] #contract-preview-paper h3,
:root[data-visual-theme="roadster"] #contract-preview-paper h4,
:root[data-visual-theme="roadster"] .contract-document h1,
:root[data-visual-theme="roadster"] .contract-document h2,
:root[data-visual-theme="roadster"] .contract-document h3,
:root[data-visual-theme="roadster"] .contract-document h4,
:root[data-visual-theme="roadster"] .anonymous-report-document h1,
:root[data-visual-theme="roadster"] .anonymous-report-document h2,
:root[data-visual-theme="roadster"] .anonymous-report-document h3,
:root[data-visual-theme="roadster"] .anonymous-report-document h4 {
  color: #0f172a;
}
:root[data-visual-theme="roadster"] .anonymous-report-page {
  --report-muted: #56617a;
}
:root[data-visual-theme="roadster"] .anonymous-report-footer__note {
  color: #56617a;
}

/* Figures that were dimmed by rank, and glyphs that vanished into the gray. */
:root[data-theme="light"][data-visual-theme="roadster"] .report-infographic-rank,
:root[data-theme="light"][data-visual-theme="roadster"] .report-infographic-value bdi,
:root[data-theme="light"][data-visual-theme="roadster"] .organization-comparison-ring__label {
  color: var(--ink);
}
:root[data-theme="light"][data-visual-theme="roadster"] .search-control > span,
:root[data-theme="light"][data-visual-theme="roadster"] .period-summary-empty {
  color: var(--muted);
}
:root[data-theme="dark"][data-visual-theme="roadster"] .year-accordion-item:not([open]) .year-accordion-chevron,
:root[data-theme="dark"][data-visual-theme="roadster"] .analysis-type-switch__option:not(.is-active) .analysis-type-switch__mark {
  color: var(--brand);
}
:root[data-visual-theme="roadster"] .contract-metric-link--warn strong {
  color: var(--warning);
}

/* The skip link is a white pill in every theme. */
:root[data-visual-theme="roadster"] .skip-link {
  color: #0f172a;
}

/* Yellow text on a yellow-tinted gray uses the palette's pale yellow. */
:root[data-theme="light"][data-visual-theme="roadster"] .analysis-type-switch__mark,
:root[data-theme="light"][data-visual-theme="roadster"] .hr-photo-action,
:root[data-theme="light"][data-visual-theme="roadster"] .annual-summary-average bdi,
:root[data-theme="light"][data-visual-theme="roadster"] .annual-feedback-formula bdi,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-employee-avatar,
:root[data-theme="light"][data-visual-theme="roadster"] .contract-detail-avatar,
:root[data-theme="light"][data-visual-theme="roadster"] .alert:not(.alert-info):not(.alert-success) .alert-icon {
  color: #fef9c3;
}
:root[data-theme="light"][data-visual-theme="roadster"] .account-status-button {
  color: #fff;
}
:root[data-theme="light"][data-visual-theme="roadster"] .manager-direct-actions .button-primary {
  background: var(--brand);
}
:root[data-theme="dark"][data-visual-theme="roadster"] .evaluation-workflow-year-complete__mark {
  background: #123c2a;
  color: #8ee6b5;
}

/*
 * The light variant is a dark surface too, so the browser's own controls (the
 * calendar and clock buttons, select arrows, scrollbars) must be drawn light.
 */
:root[data-theme="light"][data-visual-theme="roadster"] {
  color-scheme: dark;
}

/* Salary and record notes used a fixed slate, and their links a fixed blue, both lost on this gray. */
:root[data-theme="light"][data-visual-theme="roadster"] .pay-total small,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-total strong span,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-since,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-line dt,
:root[data-theme="light"][data-visual-theme="roadster"] .record-notes,
:root[data-theme="light"][data-visual-theme="roadster"] .record-item dt,
:root[data-theme="light"][data-visual-theme="roadster"] .record-archive > summary {
  color: var(--muted);
}
:root[data-theme="light"][data-visual-theme="roadster"] .record-item nav a,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-history-item nav a,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-annex-link,
:root[data-theme="light"][data-visual-theme="roadster"] .pay-card header nav a {
  color: #fef9c3;
}

/* This theme's light variant is a dark surface: its cards take the dark-surface depth, and the hover icon keeps dark ink on yellow. */
:root[data-theme="light"][data-visual-theme="roadster"] .place-group,
:root[data-theme="light"][data-visual-theme="roadster"] .desk-waiting,
:root[data-theme="light"][data-visual-theme="roadster"] .desk-panel,
:root[data-theme="light"][data-visual-theme="roadster"] .place-figure,
:root[data-theme="light"][data-visual-theme="roadster"] .desk-card,
:root[data-theme="light"][data-visual-theme="roadster"] .desk-clear {
  border-color: color-mix(in srgb, var(--line) 82%, var(--ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px -18px rgba(0, 0, 0, .55);
}
:root[data-visual-theme="roadster"] .place-item:hover .ui-icon {
  color: var(--roadster-on-brand);
}