/* BOS Clear workspace theme. Customer-facing website and app builders use separate style guides. */
:root {
  --clear-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --clear-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --clear-canvas: #f4f5f7;
  --clear-surface: #ffffff;
  --clear-surface-subtle: #f8f9fa;
  --clear-line: #dfe1e6;
  --clear-ink: #172b4d;
  --clear-ink-muted: #5e6c84;
  --clear-accent: #0c66e4;
  --clear-accent-deep: #0747a6;
  --clear-accent-soft: #e9f2ff;
  --clear-on-accent: #ffffff;
  --clear-focus: #2684ff;
  --clear-control-height: 40px;
  /* Shared layout rhythm for every BOS-operated surface. Components should
     choose the semantic tier instead of introducing one-off pixel gaps. */
  --clear-space-1: 4px;
  --clear-space-2: 8px;
  --clear-space-3: 12px;
  --clear-space-4: 16px;
  --clear-space-5: 20px;
  --clear-space-6: 24px;
  --clear-space-7: 32px;
  --clear-space-8: 40px;
  --clear-inline-gap: var(--clear-space-2);
  --clear-control-gap: var(--clear-space-3);
  --clear-grid-gap: var(--clear-space-4);
  --clear-section-gap: var(--clear-space-5);
  --clear-page-gap: var(--clear-space-7);
  --clear-card-padding: var(--clear-space-6);
  --bos-surface-soft: color-mix(in srgb, var(--clear-surface) 62%, transparent);
  --bos-surface-medium: color-mix(in srgb, var(--clear-surface) 78%, transparent);
  --bos-surface-solid: var(--clear-surface);
  --bos-surface-ink: var(--clear-ink);

  /* Compatibility aliases let existing BOS components adopt Clear incrementally. */
  --bg: var(--clear-canvas);
  --panel: var(--clear-surface);
  --panel-strong: var(--clear-surface-subtle);
  --border: var(--clear-line);
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --accent: var(--clear-accent);
  --accent-deep: var(--clear-accent-deep);
  --shadow: 0 1px 2px rgba(9, 30, 66, 0.12);
  --radius-xl: 8px;
  --radius-lg: 6px;
  --radius-md: 3px;
  --radius-button: 3px;
  --radius-chip: 999px;
  --radius-nav: 3px;
  --font-sans: var(--clear-font-sans);
  --font-mono: var(--clear-font-mono);
}

body[data-ui-accent="blue"] {
  --clear-accent: #0c66e4;
  --clear-accent-deep: #0747a6;
  --clear-accent-soft: #e9f2ff;
}

body[data-ui-accent="teal"] {
  --clear-accent: #0f766e;
  --clear-accent-deep: #0b5b55;
  --clear-accent-soft: #e7f6f4;
}

body[data-ui-accent="violet"] {
  --clear-accent: #6d5bd0;
  --clear-accent-deep: #5142a5;
  --clear-accent-soft: #f0edff;
}

body[data-ui-accent="green"] {
  --clear-accent: #2e7d32;
  --clear-accent-deep: #1f5d24;
  --clear-accent-soft: #eaf5ea;
}

body[data-ui-accent="orange"] {
  --clear-accent: #c25100;
  --clear-accent-deep: #8f3c00;
  --clear-accent-soft: #fff0e5;
}

body[data-ui-accent="rose"] {
  --clear-accent: #c9376e;
  --clear-accent-deep: #97264f;
  --clear-accent-soft: #fbeaf0;
}

body[data-ui-canvas="mist"] { --clear-canvas: #f4f5f7; }
body[data-ui-canvas="linen"] { --clear-canvas: #faf7f2; }
body[data-ui-canvas="sage"] { --clear-canvas: #f2f7f3; }
body[data-ui-canvas="blush"] { --clear-canvas: #fbf3f5; }
body[data-ui-canvas="sky"] { --clear-canvas: #f1f6fb; }
body[data-ui-canvas="sand"] { --clear-canvas: #f8f4ec; }

body[data-ui-mode="dark"] {
  --clear-canvas: #15171a;
  --clear-surface: #1d2125;
  --clear-surface-subtle: #22272b;
  --clear-line: #3b444d;
  --clear-ink: #f1f2f4;
  --clear-ink-muted: #b6c2cf;
  --clear-on-accent: #172b4d;
  --bos-surface-soft: color-mix(in srgb, #1d2125 62%, transparent);
  --bos-surface-medium: color-mix(in srgb, #1d2125 78%, transparent);
  --bos-surface-solid: #1d2125;
  --bos-surface-ink: #f1f2f4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

/* Setup My House has purpose-built logo crops so artwork stays legible in each shell. */
img[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-horizontal-light.png");
}

.sidebar img.company-brand-logo[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-wide-light.png");
}

img.company-logo-inline[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-square-light.png");
}

body[data-ui-mode="dark"] img[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-horizontal-dark.png");
}

body[data-ui-mode="dark"] .sidebar img.company-brand-logo[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-wide-dark.png");
}

body[data-ui-mode="dark"] img.company-logo-inline[src*="/brand-assets/setup-my-house/setup-my-house-"] {
  content: url("/brand-assets/setup-my-house/setup-my-house-square-dark.png");
}

/* Accent shades are independently tuned for dark canvases so labels and links
   retain WCAG AA contrast instead of inheriting the darker light-mode shade. */
body[data-ui-mode="dark"][data-ui-accent="blue"] {
  --clear-accent: #85b8ff;
  --clear-accent-deep: #b6d7ff;
  --clear-accent-soft: #17365d;
}

body[data-ui-mode="dark"][data-ui-accent="teal"] {
  --clear-accent: #5eead4;
  --clear-accent-deep: #99f6e4;
  --clear-accent-soft: #123f3a;
}

body[data-ui-mode="dark"][data-ui-accent="violet"] {
  --clear-accent: #b8acf6;
  --clear-accent-deep: #d6d0ff;
  --clear-accent-soft: #332c63;
}

body[data-ui-mode="dark"][data-ui-accent="green"] {
  --clear-accent: #7ee787;
  --clear-accent-deep: #aff5b4;
  --clear-accent-soft: #1d4625;
}

body[data-ui-mode="dark"][data-ui-accent="orange"] {
  --clear-accent: #ff9d57;
  --clear-accent-deep: #ffc08f;
  --clear-accent-soft: #572b12;
}

body[data-ui-mode="dark"][data-ui-accent="rose"] {
  --clear-accent: #ff8fbd;
  --clear-accent-deep: #ffc0d9;
  --clear-accent-soft: #59233b;
}

body[data-ui-density="compact"] { --clear-control-height: 32px; }
body[data-ui-density="comfortable"] { --clear-control-height: 40px; }
body[data-ui-density="touch"] { --clear-control-height: 48px; }

/* Give every standard BOS dropdown the same clear, touch-friendly treatment.
   Multi-select listboxes keep their native list presentation. */
body[data-surface] select:not([multiple]):not([size]) {
  min-height: 58px;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 52px 0 17px;
  border: 1px solid color-mix(in srgb, var(--clear-ink) 20%, var(--clear-line));
  border-radius: 12px;
  color: var(--clear-ink);
  background-color: var(--clear-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M2 2l6 6 6-6' stroke='%23172b4d' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  box-shadow: 0 6px 18px rgba(9, 30, 66, 0.08);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body[data-surface] select:not([multiple]):not([size]):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--clear-accent) 58%, var(--clear-line));
  box-shadow: 0 9px 22px rgba(9, 30, 66, 0.11);
}

body[data-surface] select:not([multiple]):not([size]):focus-visible {
  outline: none;
  border-color: var(--clear-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--clear-focus) 18%, transparent),
    0 9px 22px rgba(9, 30, 66, 0.11);
}

body[data-surface] select:not([multiple]):not([size]):active:not(:disabled) {
  transform: translateY(1px);
}

body[data-surface] select:not([multiple]):not([size]):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

body[data-ui-mode="dark"][data-surface] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M2 2l6 6 6-6' stroke='%23f1f2f4' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

body[data-surface="settings"] {
  --bg: var(--clear-canvas);
  --panel: var(--clear-surface);
  --panel-strong: var(--clear-surface-subtle);
  --border: var(--clear-line);
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --accent: var(--clear-accent);
  --accent-deep: var(--clear-accent-deep);
  background: var(--clear-canvas);
}

body[data-surface="settings"] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body[data-surface="settings"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--clear-control-height);
}

body[data-surface="settings"] :where(.primary-button, .ghost-button, .danger-button) {
  min-height: var(--clear-control-height);
}

body[data-surface="settings"] .section,
body[data-surface="settings"] .page-header,
body[data-surface="settings"] .hero-panel,
body[data-surface="settings"] .summary-card,
body[data-surface="settings"] .metric-card,
body[data-surface="settings"] .module-card {
  box-shadow: var(--shadow);
}

/* Admin pages previously relied on whichever margin an individual feature
   happened to declare. Give every top-level panel the same vertical rhythm;
   nested sections are spaced by their owning grid instead. */
body[data-surface="settings"] .main-panel > :where(
  .finance-workspace-nav,
  .marketing-workspace-nav,
  .metrics,
  .module-grid,
  .page-grid,
  .section
),
body[data-surface="owner"].owner-guide-mode .main-panel > :where(
  .finance-workspace-nav,
  .marketing-workspace-nav,
  .metrics,
  .module-grid,
  .page-grid,
  .section
) {
  margin-block-start: var(--clear-section-gap);
}

body[data-surface="settings"] :where(.finance-workspace-nav, .marketing-workspace-nav),
body[data-surface="owner"].owner-guide-mode :where(.finance-workspace-nav, .marketing-workspace-nav) {
  margin-block-end: 0;
}

body[data-surface="settings"] :where(.metrics, .module-grid),
body[data-surface="owner"].owner-guide-mode :where(.metrics, .module-grid) {
  gap: var(--clear-grid-gap);
}

body[data-surface="settings"] .page-grid,
body[data-surface="owner"].owner-guide-mode .page-grid {
  column-gap: var(--clear-grid-gap);
  row-gap: var(--clear-section-gap);
}

body[data-surface="settings"] .page-grid > .section,
body[data-surface="owner"].owner-guide-mode .page-grid > .section {
  margin-block-start: 0;
}

body:is([data-surface="owner"], [data-surface="setup"]) {
  --paper: var(--clear-canvas);
  --card: var(--clear-surface);
  --panel: var(--clear-surface);
  --line: var(--clear-line);
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --accent: var(--clear-accent);
  --accent-deep: var(--clear-accent-deep);
  --accent-strong: var(--clear-accent-deep);
  --accent-soft: var(--clear-accent-soft);
  --sans: var(--clear-font-sans);
  --serif: var(--clear-font-sans);
  --mono: var(--clear-font-mono);
  background: var(--clear-canvas);
  color: var(--clear-ink);
  font-family: var(--clear-font-sans);
  min-height: 100vh;
}

body:is([data-surface="owner"], [data-surface="setup"]) :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body:is([data-surface="owner"], [data-surface="setup"]) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--clear-control-height);
}

body[data-surface="owner"] .topbar,
body[data-surface="setup"] .topbar {
  border-color: var(--clear-line);
  background: color-mix(in srgb, var(--clear-surface) 94%, transparent);
}

body[data-surface="owner"] .topbar nav {
  border-radius: 3px;
  background: var(--clear-surface-subtle);
}

body[data-surface="owner"] .topbar nav a {
  border-radius: 3px;
}

body[data-surface="owner"] .topbar nav a.active {
  background: var(--clear-accent);
}

/* The owner dashboard used a mixture of 34, 54, and 60px margins. A single
   page stack keeps the same hierarchy without irregular jumps. */
body[data-surface="owner"] #dashboard-view:not([hidden]) {
  display: grid;
  gap: var(--clear-page-gap);
}

body[data-surface="owner"] #dashboard-view > :where(
  .owner-hero,
  .owner-metrics,
  .sales-pipeline-tile,
  .section-block,
  .people-grid
) {
  margin-block: 0;
}

body[data-surface="owner"] :where(.wizard-grid, .people-grid) {
  gap: var(--clear-grid-gap);
}

body[data-surface="owner"] :where(h1, h2, h3),
body[data-surface="setup"] :where(h1, h2, h3) {
  font-family: var(--clear-font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body[data-surface="owner"] h1 {
  max-width: 760px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
}

body[data-surface="owner"] h2 {
  font-size: clamp(24px, 2.5vw, 34px);
}

body[data-surface="owner"] h3 {
  font-size: 20px;
}

body[data-surface="owner"] h1 em {
  font-style: normal;
}

body[data-surface="owner"] .hero-action strong,
body[data-surface="owner"] :where(.owner-metrics, .planner-kpis) strong,
body[data-surface="setup"] .progress-card strong {
  font-family: var(--clear-font-sans);
}

body[data-surface="owner"] .hero-action,
body[data-surface="owner"] .owner-metrics,
body[data-surface="owner"] .planner-kpis,
body[data-surface="owner"] .wizard-card,
body[data-surface="owner"] .venture-section,
body[data-surface="owner"] .venture-card,
body[data-surface="owner"] .planner-panel,
body[data-surface="owner"] .wizard-steps {
  border-radius: 6px;
  box-shadow: var(--shadow);
}

body[data-surface="owner"] :where(.owner-metrics, .planner-kpis, .wizard-card, .people-grid a, .planner-panel, .wizard-steps) {
  background: var(--clear-surface);
}

body[data-surface="owner"] .hero-action {
  border-color: var(--clear-accent-deep);
  background: var(--clear-accent);
  color: var(--clear-on-accent);
}

body[data-surface="owner"] .button.primary,
body:is([data-surface="owner"], [data-surface="settings"], [data-surface="setup"]) .primary-button,
body[data-surface="setup"] button.primary {
  color: var(--clear-on-accent);
}

body[data-surface="owner"] .wizard-card.featured,
body[data-surface="owner"] .venture-section {
  background: var(--clear-ink);
}

body[data-surface="owner"] .wizard-card.featured p {
  color: #b6c2cf;
}

body[data-surface="owner"] .wizard-card.featured > strong {
  color: #ffffff;
}

/* Dark mode turns the ink token into a light tile surface. Keep text on
   featured light tiles dark instead of inheriting the former white text. */
body[data-ui-mode="dark"][data-surface="owner"] .wizard-card.featured {
  color: #172b4d;
}

body[data-ui-mode="dark"][data-surface="owner"] .wizard-card.featured :where(h3, .card-icon),
body[data-ui-mode="dark"][data-surface="owner"] .wizard-card.featured > strong {
  color: #172b4d;
}

body[data-ui-mode="dark"][data-surface="owner"] .wizard-card.featured p {
  color: #44546f;
}

body[data-ui-mode="dark"][data-surface="owner"] .wizard-card.featured .card-number {
  color: #8f3c00;
}

body[data-ui-mode="dark"][data-surface="owner"] .wizard-steps li.active > span {
  color: #172b4d;
}

/* Scheduling status fills were designed for the light owner theme. In dark
   mode their pale backgrounds inherited near-white text, leaving headers,
   totals, and notes unreadable. Use dark semantic fills and keep the active
   day on the company accent so every table state has a clear foreground. */
body[data-ui-mode="dark"][data-surface="owner"] {
  --green: #85e0b7;
  --green-soft: #173b2e;
  --red: #ff9e92;
  --red-soft: #4a211f;
  --amber: #ffd37a;
  --amber-soft: #493719;
}

body[data-ui-mode="dark"][data-surface="owner"] :where(.coverage-week, .hourly-coverage) th {
  background: #2a3036;
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="owner"] .coverage-week th.day:hover {
  background: #343c44;
}

body[data-ui-mode="dark"][data-surface="owner"] .coverage-week th.day.selected {
  background: var(--clear-accent);
  color: var(--clear-on-accent);
}

body[data-ui-mode="dark"][data-surface="owner"] :where(.planner-load-error, .planner-alert.critical) {
  color: #ffd8d3;
}

body[data-ui-mode="dark"][data-surface="owner"] .planner-alert.warning {
  color: #ffe8b2;
}

/* The ink token becomes light in dark mode, which previously turned the
   venture panel pale while its text stayed white. Preserve the intended dark
   panel and rich accent cards instead. */
body[data-ui-mode="dark"][data-surface="owner"] .venture-section {
  border: 1px solid var(--clear-line);
  background: #111315;
  color: #ffffff;
}

body[data-ui-mode="dark"][data-surface="owner"] .venture-section .section-heading :where(h2, p) {
  color: #f1f2f4;
}

body[data-ui-mode="dark"][data-surface="owner"] .venture-card {
  color: #ffffff;
}

body[data-ui-mode="dark"][data-surface="owner"] .venture-card.start-card {
  background: color-mix(in srgb, var(--clear-accent) 48%, #1d120e);
}

body[data-ui-mode="dark"][data-surface="owner"] .venture-card.event-card {
  background: color-mix(in srgb, var(--clear-accent) 35%, #201814);
}

body[data-ui-mode="dark"][data-surface="owner"] .venture-card :where(p, strong, .venture-label) {
  color: #ffffff;
}

body[data-surface="owner"] .venture-card.start-card {
  background: color-mix(in srgb, var(--clear-accent) 72%, var(--clear-ink));
}

body[data-surface="owner"] .venture-card.event-card {
  background: color-mix(in srgb, var(--clear-accent) 42%, var(--clear-ink));
}

body[data-surface="setup"] .intro h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1;
}

body[data-surface="setup"] :where(
  .progress-card,
  .overview-card,
  .status-card,
  .visibility-card,
  .readiness div,
  .operations-shell,
  .detail-shell,
  .operation-card,
  .requirements-card,
  .requirement-item,
  .dialog-card
) {
  border-color: var(--clear-line);
  border-radius: 6px;
  background: var(--clear-surface);
  box-shadow: var(--shadow);
}

body[data-surface="setup"] .operation-card.is-active {
  border-color: var(--clear-accent);
  background: var(--clear-accent-soft);
}

body[data-surface="setup"] .progress-card i {
  background: var(--clear-accent);
}

/* Configuration is a page stack too. Reset legacy strip margins so every
   summary, readiness block, and operation panel uses the same separation. */
body[data-surface="setup"] main {
  display: grid;
  gap: var(--clear-section-gap);
}

body[data-surface="setup"] main > :where(
  .intro,
  .overview-strip,
  .status-strip,
  .visibility-strip,
  .readiness,
  .operations-shell,
  .detail-shell
) {
  margin-block: 0;
}

body[data-surface="setup"] main > :where(.overview-strip, .status-strip, .visibility-strip, .readiness):empty {
  display: none;
}

body[data-surface="setup"] :where(.overview-strip, .status-strip, .visibility-strip, .operation-grid, .review-grid) {
  gap: var(--clear-grid-gap);
}

/* Setup has semantic card variants with legacy light backgrounds. In dark
   workspaces, keep every setup surface dark and communicate state with borders
   and accessible status text instead of light tiles with inherited light ink. */
body[data-ui-mode="dark"][data-surface="setup"] :where(
  .new-business-shell,
  .new-business-summary div,
  .new-business-sections article,
  .qualification-grid .check-row,
  .overview-card.priority,
  .status-card[data-state],
  .visibility-card[data-kind],
  .operation-card,
  .meta-pill,
  .help,
  .configure-card,
  .review-checklist,
  .requirements-card,
  .requirement-item[data-state],
  .review-grid article
) {
  background: var(--clear-surface);
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-heading :where(h2, p, .eyebrow),
body[data-ui-mode="dark"][data-surface="setup"] .new-business-form label,
body[data-ui-mode="dark"][data-surface="setup"] .new-business-summary :where(small, strong),
body[data-ui-mode="dark"][data-surface="setup"] .new-business-sections :where(strong, small) {
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-heading > div > p:not(.eyebrow),
body[data-ui-mode="dark"][data-surface="setup"] .new-business-summary small,
body[data-ui-mode="dark"][data-surface="setup"] .new-business-sections small {
  color: var(--clear-ink-muted);
}

body[data-ui-mode="dark"][data-surface="setup"] .foundation-badge {
  border: 1px solid var(--clear-accent);
  background: var(--clear-accent-soft);
  color: var(--clear-accent-deep);
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-form :where(input, select) {
  border-color: var(--clear-line);
  background: var(--clear-surface-subtle);
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-form :where(input, select)::placeholder {
  color: var(--clear-ink-muted);
  opacity: 1;
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-form select:invalid {
  color: var(--clear-ink-muted);
}

body[data-ui-mode="dark"][data-surface="setup"] .new-business-form select option {
  background: var(--clear-surface-subtle);
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="setup"] :where(
  .mini-pill,
  .state.configured,
  .state.in_progress,
  .state.remind_later,
  .state.not_started,
  .state.needs_attention,
  .state.disabled,
  .state.skipped,
  .state.not_applicable,
  .requirements-rollup span,
  .requirement-meta span
) {
  border-color: var(--clear-line);
  background: var(--clear-surface-subtle);
  color: var(--clear-ink-muted);
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.quiet, .requirement-action) {
  border-color: var(--clear-accent);
  background: var(--clear-surface-subtle);
  color: var(--clear-accent-deep);
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.dialog-card input, .dialog-card select) {
  border-color: var(--clear-line);
  background: var(--clear-surface-subtle);
  color: var(--clear-ink);
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.skip-link, .brand b) {
  background: var(--clear-accent);
  color: var(--clear-on-accent);
}

body[data-ui-mode="dark"][data-surface="setup"] .primary {
  color: var(--clear-on-accent);
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.status-chip.configured, .state.configured) {
  color: #7ee787;
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.status-chip.in_progress, .state.in_progress, .state.remind_later) {
  color: #f5b963;
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.status-chip.not_started, .state.not_started, .state.needs_attention, .error) {
  color: #ff8a80;
}

body[data-ui-mode="dark"][data-surface="setup"] :where(.status-chip.disabled, .state.disabled, .state.skipped, .state.not_applicable) {
  color: var(--clear-ink-muted);
}

/* Operational workspaces inherit company style without changing their workflows. */
body[data-surface="workspace"] {
  --paper: var(--clear-canvas);
  --paper-strong: var(--clear-surface);
  --line: var(--clear-line);
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --accent: var(--clear-accent);
  --accent-dark: var(--clear-accent-deep);
  --wash: var(--clear-accent-soft);
  --sans: var(--clear-font-sans);
  --serif: var(--clear-font-sans);
  background: var(--clear-canvas);
}

body[data-surface="workspace"] :where(.entry-header, .sign-in-card, .dialog-card, .privacy-note, .platform-actions, .workspace-card) {
  border-color: var(--clear-line);
  background: var(--clear-surface);
  box-shadow: var(--shadow);
}

body[data-surface="workspace"] :where(.entry-intro h1, .launcher-heading h1, .card-heading h2, .dialog-heading h2) {
  font-family: var(--clear-font-sans);
}

body[data-surface="workspace"] :where(.brand-mark, .signed-in-person > span) {
  border-radius: 6px;
  background: var(--clear-accent-deep);
  font-family: var(--clear-font-sans);
}

body[data-surface="workspace"] .brand-mark:has(img) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-surface="workspace"] :where(button, a, input, select):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body[data-surface="workspace"] .workspace-grid {
  gap: var(--clear-grid-gap);
}

body[data-surface="front-desk"] {
  --canvas: var(--clear-canvas);
  --canvas-deep: var(--clear-canvas);
  --panel: var(--clear-surface);
  --panel-solid: var(--clear-surface);
  --text: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --line: var(--clear-line);
  --accent: var(--clear-accent);
  --accent-deep: var(--clear-accent-deep);
  --accent-soft: var(--clear-accent-soft);
  --sans: var(--clear-font-sans);
  --serif: var(--clear-font-sans);
  --mono: var(--clear-font-mono);
  background: var(--clear-canvas);
}

body[data-surface="front-desk"] :where(.hero-row, .metric, .panel, .appointment-row, .data-row, .profile-fields > div, .customer-notes) {
  border-color: var(--clear-line);
  background: var(--clear-surface);
  box-shadow: var(--shadow);
}

body[data-surface="front-desk"] :where(.hero-row h2, .topbar h1, .panel-heading h3, .metric strong, .customer-profile-hero h2, .staff-profile-hero h2) {
  font-family: var(--clear-font-sans);
  font-weight: 700;
}

body[data-surface="front-desk"] .primary-nav a.is-active {
  color: var(--clear-accent-deep);
  background: var(--clear-accent-soft);
}

body[data-surface="front-desk"] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body[data-surface="front-desk"] :where(.metric-grid, .content-grid, .customer-profile-grid, .form-grid) {
  gap: var(--clear-grid-gap);
}

body[data-surface="front-desk"] .metric-grid {
  margin-block: var(--clear-section-gap);
}

body[data-surface="pos"] {
  --cream: var(--clear-canvas);
  --paper: var(--clear-surface);
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --forest: var(--clear-accent-deep);
  --leaf: var(--clear-accent);
  --lime: var(--clear-accent-soft);
  --citrus: color-mix(in srgb, var(--clear-accent) 22%, var(--clear-surface));
  --line: var(--clear-line);
  --shadow: 0 1px 3px rgba(9, 30, 66, 0.14);
  --sans: var(--clear-font-sans);
  --serif: var(--clear-font-sans);
  --mono: var(--clear-font-mono);
  background: var(--clear-canvas);
}

body[data-surface="pos"] .topbar {
  background: var(--clear-accent-deep);
  border-bottom-color: var(--clear-accent-soft);
}

body[data-surface="pos"] .catalog-pane {
  background: var(--clear-canvas);
}

body[data-surface="pos"] :where(.cart-pane, .menu-item, .dialog-card, .operation-panel, .receipt-summary) {
  border-color: var(--clear-line);
  background: var(--clear-surface);
}

body[data-surface="pos"] :where(h1, h2, .grand-total strong, .receipt-summary strong, .operation-panel h3) {
  font-family: var(--clear-font-sans);
  font-weight: 700;
}

body[data-surface="pos"] :where(.scanner-bar, .customer-context, .card-recognition-consent) {
  border-color: color-mix(in srgb, var(--clear-accent) 30%, var(--clear-line));
  background: var(--clear-accent-soft);
}

body[data-surface="pos"] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body[data-surface="pos"] :where(.menu-grid, .operations-grid) {
  gap: var(--clear-control-gap);
}

body[data-surface="storeroom"] :where(.metric-grid, .dashboard-grid, .quality-guidance, .printer-grid) {
  gap: var(--clear-grid-gap);
}

body[data-surface="storeroom"] :where(.scan-hero, .metric-grid, .quality-guidance, .printer-grid) {
  margin-block-end: var(--clear-section-gap);
}

body[data-surface="storeroom"] .page-heading {
  margin-block: var(--clear-page-gap) var(--clear-section-gap);
}

body[data-surface="attendance"] {
  --ink: var(--clear-ink);
  --muted: var(--clear-ink-muted);
  --plum: var(--clear-accent);
  --plum-dark: var(--clear-accent-deep);
  --lilac: var(--clear-accent-soft);
  --line: var(--clear-line);
  color: var(--clear-ink);
  background: var(--clear-canvas);
  font-family: var(--clear-font-sans);
}

body[data-surface="attendance"] :where(.attendance-card, .card, .profile-button, .auth-form input, .explanation textarea, .exception-item) {
  border-color: var(--clear-line);
  background: var(--clear-surface);
  box-shadow: var(--shadow);
}

body[data-surface="attendance"] :where(.kicker, .eyebrow, .back-link) {
  color: var(--clear-accent-deep);
}

body[data-surface="attendance"] :where(.brand-mark, .avatar, .punch-actions button, .primary-button, .action-button) {
  background: var(--clear-accent-deep);
}

body[data-surface="attendance"] :where(.state, .status-icon, .step-heading > span, .profile-photo, .quiet-button, .back-button, .action-button.secondary) {
  color: var(--clear-accent-deep);
  background: var(--clear-accent-soft);
}

body[data-surface="attendance"] .timer span {
  background: var(--clear-accent);
}

body[data-surface="attendance"] :where(button, a, input, textarea):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

body[data-surface="terminal-setup"] {
  color: var(--clear-ink);
  background: var(--clear-canvas);
  font-family: var(--clear-font-sans);
}

body[data-surface="terminal-setup"] main {
  background: var(--clear-canvas);
}

body[data-surface="terminal-setup"] .card {
  border-color: var(--clear-line);
  border-radius: 8px;
  color: var(--clear-ink);
  background: var(--clear-surface);
  box-shadow: var(--shadow);
}

body[data-surface="terminal-setup"] .mark,
body[data-surface="terminal-setup"] button {
  background: var(--clear-accent-deep);
}

body[data-surface="terminal-setup"] :where(.eyebrow, p) {
  color: var(--clear-ink-muted);
}

body[data-surface="terminal-setup"] input {
  border-color: var(--clear-line);
  color: var(--clear-ink);
  background: var(--clear-surface);
}

body[data-surface="terminal-setup"] :where(button, input):focus-visible {
  outline: 2px solid var(--clear-focus);
  outline-offset: 2px;
}

.theme-choice-group {
  margin-top: 20px;
}

.theme-choice-heading {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.theme-preview-card.is-active {
  border-color: var(--accent);
  background: var(--clear-accent-soft);
  color: #172b4d;
}

.theme-preview-card.is-active p {
  color: #5e6c84;
}

.theme-accent-swatch,
.theme-canvas-swatch {
  display: block;
  width: 100%;
  height: 30px;
  border: 1px solid rgba(9, 30, 66, 0.14);
  border-radius: 3px;
}

.theme-density-swatch {
  display: block;
  width: 100%;
  max-width: 180px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel-strong);
}

@media (max-width: 720px) {
  :root {
    --clear-control-height: 44px;
  }
}