:root {
  color-scheme: light;
  --theme-canvas: #f7f5f2;
  --theme-surface: #ffffff;
  --theme-surface-subtle: #fcfaf8;
  --theme-surface-muted: #faf7f4;
  --theme-text: #1b1815;
  --theme-text-muted: #746b64;
  --theme-text-soft: #968a80;
  --theme-border: #e9e2dc;
  --theme-border-strong: #d8ccc2;
  --theme-accent: #d0a47a;
  --theme-accent-strong: #a8774f;
  --theme-accent-soft: #f3e7dc;
  --theme-focus: rgba(168, 119, 79, 0.3);
  --theme-overlay: rgba(27, 24, 21, 0.72);
  /* De accentkleur is in beide thema's licht, dus de tekst erop blijft donker. */
  --theme-on-accent: #1b1815;
  /* Een omgekeerde kaart (het controleblad van de intake): donker in licht thema, verhoogd in donker. */
  --theme-inverse-surface: #1b1815;
  --theme-inverse-text: #f7f2ec;
  --theme-inverse-muted: #b9ada3;
  --theme-info-text: #244a63;
  --theme-info-surface: #e7f3f9;
  --theme-info-border: #cee2ec;
  --theme-info-indicator: #397fa8;
  --theme-success-text: #235f49;
  --theme-success-surface: #e3f4e9;
  --theme-success-border: #a7d0b5;
  --theme-warning-text: #80530d;
  --theme-warning-surface: #faeccf;
  --theme-warning-border: #cf8c20;
  --theme-danger-text: #843838;
  --theme-danger-surface: #f7e4e1;
  --theme-danger-border: #b96860;
  --theme-shadow: 0 20px 55px rgba(48, 35, 25, 0.09);
  accent-color: var(--theme-accent-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --theme-canvas: #171411;
    --theme-surface: #211d19;
    --theme-surface-subtle: #28231f;
    --theme-surface-muted: #302923;
    --theme-text: #f4eee8;
    --theme-text-muted: #c3b7ad;
    --theme-text-soft: #9e9186;
    --theme-border: #3b342e;
    --theme-border-strong: #51463d;
    --theme-accent: #d8ab82;
    --theme-accent-strong: #e6bd98;
    --theme-accent-soft: #453328;
    --theme-focus: rgba(230, 189, 152, 0.34);
    --theme-overlay: rgba(7, 6, 5, 0.82);
    --theme-inverse-surface: #302923;
    --theme-inverse-text: #f4eee8;
    --theme-inverse-muted: #c3b7ad;
    --theme-info-text: #b9dcec;
    --theme-info-surface: #1c3039;
    --theme-info-border: #345463;
    --theme-info-indicator: #72b4d1;
    --theme-success-text: #b7ddc8;
    --theme-success-surface: #1d3428;
    --theme-success-border: #3b654f;
    --theme-warning-text: #f0d29c;
    --theme-warning-surface: #3b2d18;
    --theme-warning-border: #765a2b;
    --theme-danger-text: #f0bbb5;
    --theme-danger-surface: #3b2422;
    --theme-danger-border: #71413d;
    --theme-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-canvas: #171411;
  --theme-surface: #211d19;
  --theme-surface-subtle: #28231f;
  --theme-surface-muted: #302923;
  --theme-text: #f4eee8;
  --theme-text-muted: #c3b7ad;
  --theme-text-soft: #9e9186;
  --theme-border: #3b342e;
  --theme-border-strong: #51463d;
  --theme-accent: #d8ab82;
  --theme-accent-strong: #e6bd98;
  --theme-accent-soft: #453328;
  --theme-focus: rgba(230, 189, 152, 0.34);
  --theme-overlay: rgba(7, 6, 5, 0.82);
  --theme-inverse-surface: #302923;
  --theme-inverse-text: #f4eee8;
  --theme-inverse-muted: #c3b7ad;
  --theme-info-text: #b9dcec;
  --theme-info-surface: #1c3039;
  --theme-info-border: #345463;
  --theme-info-indicator: #72b4d1;
  --theme-success-text: #b7ddc8;
  --theme-success-surface: #1d3428;
  --theme-success-border: #3b654f;
  --theme-warning-text: #f0d29c;
  --theme-warning-surface: #3b2d18;
  --theme-warning-border: #765a2b;
  --theme-danger-text: #f0bbb5;
  --theme-danger-surface: #3b2422;
  --theme-danger-border: #71413d;
  --theme-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

:root[data-theme="light"] { color-scheme: light; }

/* Compatibele aliases terwijl bestaande componenten op semantische tokens landen. */
:root {
  --ink: var(--theme-text);
  --muted: var(--theme-text-muted);
  --paper: var(--theme-canvas);
  --surface: var(--theme-surface);
  --navy: var(--theme-text);
  --navy-soft: var(--theme-surface-muted);
  --line: var(--theme-border);
  --line-dark: var(--theme-border-strong);
  --accent: var(--theme-accent);
  --accent-dark: var(--theme-accent-strong);
  --green: var(--theme-accent-strong);
  --green-soft: var(--theme-accent-soft);
  --amber: var(--theme-warning-text);
  --amber-soft: var(--theme-warning-surface);
  --danger: var(--theme-danger-text);
  --red: var(--theme-danger-text);
  --shadow: var(--theme-shadow);
}

body, .intake-page { color: var(--theme-text); background: var(--theme-canvas); }
::selection { color: var(--theme-surface); background: var(--theme-accent-strong); }
* { scrollbar-color: var(--theme-border-strong) var(--theme-canvas); }
input, select, textarea { caret-color: var(--theme-accent-strong); }

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--theme-surface-muted);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
}
.theme-switcher button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--theme-text-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.theme-switcher button:hover { color: var(--theme-text); background: var(--theme-surface); }
.theme-switcher button[aria-pressed="true"] {
  color: var(--theme-text);
  background: var(--theme-surface);
  box-shadow: 0 2px 8px rgba(48, 35, 25, 0.12);
}
.theme-switcher button:focus-visible { outline: 2px solid var(--theme-accent-strong); outline-offset: 2px; }
.theme-switcher svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-switcher-mobile { display: none; }
.login-screen { position: relative; background: var(--theme-surface); }
.login-theme { position: fixed; z-index: 2; top: 22px; right: 24px; }
.google-login { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-border-strong); }
.google-login:hover { background: var(--theme-surface-muted); border-color: var(--theme-accent-strong); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sidebar,
  :root:not([data-theme]) .utility-bar,
  :root:not([data-theme]) .form-pane,
  :root:not([data-theme]) .step-header,
  :root:not([data-theme]) .intake-start-error { background: var(--theme-surface); }
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .utility-bar,
:root[data-theme="dark"] .form-pane,
:root[data-theme="dark"] .step-header,
:root[data-theme="dark"] .intake-start-error { background: var(--theme-surface); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-logo,
  :root:not([data-theme]) .login-logo { filter: grayscale(1) brightness(0) invert(1); }
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .login-logo { filter: grayscale(1) brightness(0) invert(1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .choice-tile,
  :root:not([data-theme]) .radio-row,
  :root:not([data-theme]) .room-editor,
  :root:not([data-theme]) .fixture-room,
  :root:not([data-theme]) .form-navigation,
  :root:not([data-theme]) .detail-aside,
  :root:not([data-theme]) .price-auto-state { background: var(--theme-surface-subtle); }
}
:root[data-theme="dark"] .choice-tile,
:root[data-theme="dark"] .radio-row,
:root[data-theme="dark"] .room-editor,
:root[data-theme="dark"] .fixture-room,
:root[data-theme="dark"] .form-navigation,
:root[data-theme="dark"] .detail-aside,
:root[data-theme="dark"] .price-auto-state { background: var(--theme-surface-subtle); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) input:not([type="radio"]):not([type="checkbox"]),
  :root:not([data-theme]) select,
  :root:not([data-theme]) textarea,
  :root:not([data-theme]) .progress-step:not(.is-current):not(.is-complete) > span { color: var(--theme-text); background: var(--theme-surface); }
  :root:not([data-theme]) .case-row:hover,
  :root:not([data-theme]) .automation-list > button:hover { background: var(--theme-surface-muted); }
}
:root[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .progress-step:not(.is-current):not(.is-complete) > span { color: var(--theme-text); background: var(--theme-surface); }
:root[data-theme="dark"] .case-row:hover,
:root[data-theme="dark"] .automation-list > button:hover { background: var(--theme-surface-muted); }

.status-neutral { color: var(--theme-text-muted); background: var(--theme-surface-muted); }
.status-active, .automation-live { color: var(--theme-info-text); background: var(--theme-info-surface); border-color: var(--theme-info-border); }
.status-active i, .automation-live i { background: var(--theme-info-indicator); }
.status-success, .triage-notice-success, .automation-celebration { color: var(--theme-success-text); background: var(--theme-success-surface); border-color: var(--theme-success-border); }
.status-warning, .triage-notice-warning, .review-reason { color: var(--theme-warning-text); background: var(--theme-warning-surface); border-color: var(--theme-warning-border); }
.status-danger, .triage-form-error, .login-message { color: var(--theme-danger-text) !important; background: var(--theme-danger-surface); border-color: var(--theme-danger-border); }
.triage-modal-backdrop { background: var(--theme-overlay); }
.search-field input:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--theme-focus); }

@media (max-width: 720px) {
  .account-area .theme-switcher { display: none; }
  .theme-switcher-mobile { display: block; margin-left: auto; }
  .theme-switcher-mobile .theme-switcher { border-color: var(--theme-border-strong); }
  .login-theme { top: 18px; right: 18px; }
}