/* Load last. Palette values are mirrored in themes.js and checked by tests. */
:root,
:root[data-theme="green"] {
  --bg: #f6f7f2;
  --ink: #203b32;
  --muted: #58675d;
  --line: #e2e7dd;
  --accent: #225b46;
  --accent-dark: #174734;
  --accent-soft: #e4efd2;
  --soft: #edf2e7;
  --surface-subtle: #f6f7f3;
  --control-border: #73846e;
}
:root[data-theme="blue"] {
  --bg: #f2f6fa;
  --ink: #24384b;
  --muted: #526579;
  --line: #dce5ef;
  --accent: #245b8a;
  --accent-dark: #17456c;
  --accent-soft: #dceaf6;
  --soft: #eaf1f8;
  --surface-subtle: #f5f8fb;
  --control-border: #6f8498;
}
:root[data-theme="plum"] {
  --bg: #f8f3f7;
  --ink: #422b43;
  --muted: #705970;
  --line: #e8dce7;
  --accent: #72456f;
  --accent-dark: #563352;
  --accent-soft: #efdfed;
  --soft: #f4eaf2;
  --surface-subtle: #faf6f9;
  --control-border: #957591;
}
:root[data-theme="sand"] {
  --bg: #faf6ee;
  --ink: #463827;
  --muted: #71604b;
  --line: #e8dfcf;
  --accent: #795825;
  --accent-dark: #5e411b;
  --accent-soft: #f0e3c9;
  --soft: #f6eddd;
  --surface-subtle: #fcf9f3;
  --control-border: #927e60;
}
:root {
  color-scheme: light;
  --surface: #ffffff;
  --on-accent: #ffffff;
  /* Existing components keep their stable variable names. */
  --green: var(--accent);
  --green-dark: var(--accent-dark);
  --lime: var(--accent-soft);
  --white: var(--surface);
  --focus: var(--accent-dark);
  --hover: var(--accent-soft);
  --surface-overlay: var(--surface);
  --chat-self: var(--accent-soft);
  --danger: #a13827;
  --warm-bg: #fbebdc;
  --warm-ink: #865225;
  --rating: #865c2f;
  --star-outline: #956222;
  --star-fill: #f2d69b;
  --orange: #a65930;
  --location: #1467ab;
  --shadow: 0 12px 40px #18212b10;
  --shadow-small: 0 2px 10px #18212b20;
  --shadow-dialog: 0 30px 80px #18212b33;
  --shadow-toast: 0 8px 28px #18212b24;
  --backdrop: #18212b60;
}

/* Inputs need a visible boundary; separators remain deliberately quiet. */
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }
input, select { accent-color:var(--accent); }
select:focus-visible, .search:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.search, .chip, .iconbtn, .order-location-open, .order-location-locate.iconbtn,
.create-category-choice, .create-date-row, .create-price-field .price-input,
.customer-home .price-input, .job-interests-editor .job-interest-choice {
  border-color:var(--control-border);
}
.description { box-shadow:inset 0 0 0 1px var(--control-border); }
.guided-create .order-voice-field { box-shadow:inset 0 0 0 1px var(--control-border); }
.guided-create .order-voice-field textarea.description { box-shadow:none; }
.job-interest-choice:has(input:checked) { border-color:var(--accent); }
.map-canvas .leaflet-control-zoom a, .map-canvas a.leaflet-popup-close-button { color:var(--ink); }
.map-canvas .leaflet-popup-content-wrapper, .map-canvas .ryadom-map-tooltip {
  background:var(--surface); color:var(--ink);
}
.map-canvas .leaflet-control-attribution a { color:var(--accent); }

/* Four named choices: the check and label also identify the selected color. */
.theme-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.theme-choice { display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:10px 6px; min-width:0; min-height:112px; padding:10px; border:1px solid var(--control-border); border-radius:var(--ui-corner); background:var(--surface); color:var(--ink); text-align:left; }
.theme-choice[aria-pressed="true"] { border:2px solid var(--accent); padding:9px; background:var(--soft); }
.theme-choice:hover { background:var(--soft); }
.theme-choice-label { min-width:0; font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.theme-choice-check { width:24px; height:24px; display:grid; place-items:center; color:var(--accent); }
.theme-choice-check svg { width:21px; height:21px; stroke-width:2.3; }
.theme-preview { grid-column:1/-1; display:flex; align-items:center; justify-content:center; height:62px; border-radius:8px; background:var(--preview-bg); overflow:hidden; }
.theme-preview-surface { display:flex; align-items:center; gap:8px; width:75%; height:36px; padding:8px; border-radius:7px; background:var(--surface); }
.theme-preview-surface>span { width:40%; height:5px; border-radius:3px; background:var(--preview-accent); }
.theme-preview-surface>i { height:18px; width:32px; border-radius:5px; margin-left:auto; background:var(--preview-accent); }
.theme-choice[data-theme="green"] { --preview-bg:#f6f7f2; --preview-accent:#225b46; }
.theme-choice[data-theme="blue"] { --preview-bg:#f2f6fa; --preview-accent:#245b8a; }
.theme-choice[data-theme="plum"] { --preview-bg:#f8f3f7; --preview-accent:#72456f; }
.theme-choice[data-theme="sand"] { --preview-bg:#faf6ee; --preview-accent:#795825; }
.large-text .theme-choice-label { font-size:18px; }
@media(max-width:360px) {
  .theme-picker { gap:8px; }
  .theme-choice { position:relative; padding:8px; }
  .theme-choice[aria-pressed="true"] { padding:7px; }
  .theme-choice-label { grid-column:1/-1; }
  .theme-choice-check { position:absolute; top:4px; right:4px; border-radius:50%; background:var(--surface); }
  .theme-choice-check:empty { display:none; }
}

/* Appearance is independent from the saved color. Legacy light palettes above
   stay byte-for-byte in their public token contract. */
:root {
  --button-bg:var(--accent);
  --button-hover:var(--accent-dark);
  --button-ink:var(--on-accent);
  --notification:#c02e3d;
  --glass-highlight:#ffffffa6;
}
:root[data-color-mode="dark"][data-theme="green"] {
  --bg:#0d1b17; --surface:#142923; --ink:#e5f3eb; --muted:#b1c8ba; --line:#345345;
  --accent:#a0d8b8; --accent-dark:#c0ead0; --accent-soft:#244638; --soft:#1b352c;
  --surface-subtle:#11231d; --control-border:#829b8b;
  --button-bg:#225b46; --button-hover:#174734;
}
:root[data-color-mode="dark"][data-theme="blue"] {
  --bg:#091624; --surface:#122338; --ink:#e7f1fc; --muted:#b1c3d8; --line:#314a65;
  --accent:#92c5ff; --accent-dark:#b8dbff; --accent-soft:#214266; --soft:#193149;
  --surface-subtle:#101e30; --control-border:#839bb5;
  --button-bg:#286bc2; --button-hover:#205aa6;
}
:root[data-color-mode="dark"][data-theme="plum"] {
  --bg:#1c1420; --surface:#2a2030; --ink:#f5eaf7; --muted:#cbb8ce; --line:#54415c;
  --accent:#dfb2e6; --accent-dark:#efd0f4; --accent-soft:#45304e; --soft:#35273d;
  --surface-subtle:#251b2a; --control-border:#a58daa;
  --button-bg:#72456f; --button-hover:#563352;
}
:root[data-color-mode="dark"][data-theme="sand"] {
  --bg:#1e1911; --surface:#2b251b; --ink:#f6efdf; --muted:#d1c0a4; --line:#584b36;
  --accent:#e8c582; --accent-dark:#f4ddb0; --accent-soft:#483b25; --soft:#372f22;
  --surface-subtle:#251f16; --control-border:#a99470;
  --button-bg:#795825; --button-hover:#5e411b;
}
:root[data-color-mode="dark"] {
  color-scheme:dark;
  --on-accent:#101923;
  --button-ink:#ffffff;
  --danger:#ffa6af;
  --warm-bg:#3e3022;
  --warm-ink:#f4c88e;
  --rating:#f1cb8a;
  --star-outline:#f1cb8a;
  --star-fill:#634821;
  --orange:#f3b186;
  --location:#91c9ff;
  --notification:#ff8e9d;
  --glass-highlight:#c9e4ff16;
  --shadow:0 12px 40px #00000026;
  --shadow-small:0 2px 10px #00000033;
  --shadow-dialog:0 30px 80px #00000066;
  --shadow-toast:0 8px 28px #00000044;
  --backdrop:#020811ad;
}

/* Filled controls have their own foreground; surface is not a text color. */
.primary,.roles .active,.chip.active,.filter-options button.active {
  background:var(--button-bg); color:var(--button-ink);
}
.primary:hover { background:var(--button-hover); }
.chip.active { border-color:var(--button-bg); }
.badge-count,.avatar-camera,.voice-play,.chat-unread { color:var(--on-accent); }
:root[data-color-mode="dark"] #toast { color:var(--on-accent); }
:root[data-color-mode="dark"] #toast button { color:var(--on-accent); }
:root[data-color-mode="dark"] .profile-signout-form .profile-confirm-signout { color:var(--on-accent); }
:root[data-color-mode="dark"] .header [data-action="notifications"][data-unread="true"],
:root[data-color-mode="dark"] .chat-bell[data-unread="true"] { color:var(--notification); }
:root[data-color-mode="dark"] .notice-row>.chat-unread-dot,
:root[data-color-mode="dark"] .notice-row>.chat-unread-dot::after { background:var(--notification); }
:root[data-color-mode="dark"] .map-canvas .leaflet-control-zoom a,
:root[data-color-mode="dark"] .map-canvas .leaflet-popup-tip,
:root[data-color-mode="dark"] .map-canvas .leaflet-control-attribution { background:var(--surface); color:var(--ink); }
:root[data-color-mode="dark"] .map-canvas .leaflet-control-zoom a:hover { background:var(--soft); }
:root[data-color-mode="dark"] .map-canvas .leaflet-control-zoom a.leaflet-disabled { color:var(--muted); }
:root[data-color-mode="dark"] .map-canvas .leaflet-tooltip-top::before { border-top-color:var(--surface); }
:root[data-color-mode="dark"] .map-canvas .leaflet-tooltip-bottom::before { border-bottom-color:var(--surface); }
:root[data-color-mode="dark"] .map-canvas .leaflet-tooltip-left::before { border-left-color:var(--surface); }
:root[data-color-mode="dark"] .map-canvas .leaflet-tooltip-right::before { border-right-color:var(--surface); }
:root[data-color-mode="dark"] .map-canvas .ryadom-map-user>span>span { color:var(--location)!important; }
:root[data-color-mode="dark"] select option { background:var(--surface); color:var(--ink); }
dialog { box-shadow:var(--shadow-dialog); }

/* Three short, explicit choices; no configuration is saved by this module. */
.appearance-picker { display:grid; gap:22px; }
.appearance-picker fieldset { min-width:0; margin:0; padding:0; border:0; }
.appearance-picker legend { padding:0; margin-bottom:9px; font-size:15px; font-weight:600; line-height:1.4; }
.appearance-options,.appearance-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.appearance-choice { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:48px; padding:10px 12px; border:1px solid var(--control-border); border-radius:var(--ui-corner); background:var(--surface); color:var(--ink); text-align:left; font-size:15px; line-height:1.4; }
.appearance-choice[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); border-color:var(--accent); }
.appearance-choice[data-appearance-value="white-aero"] { grid-column:1/-1; }
.appearance-choice>span { min-width:0; }
.appearance-color { justify-content:flex-start; padding-inline:10px; }
.appearance-color .appearance-check { margin-left:auto; }
.appearance-swatch { width:15px; height:15px; border-radius:50%; flex:none; background:var(--preview-accent); }
.appearance-swatch[data-theme="green"] { --preview-accent:#225b46; }
.appearance-swatch[data-theme="blue"] { --preview-accent:#245b8a; }
.appearance-swatch[data-theme="plum"] { --preview-accent:#72456f; }
.appearance-swatch[data-theme="sand"] { --preview-accent:#795825; }
:root[data-color-mode="dark"] .appearance-swatch[data-theme="green"] { --preview-accent:#a0d8b8; }
:root[data-color-mode="dark"] .appearance-swatch[data-theme="blue"] { --preview-accent:#92c5ff; }
:root[data-color-mode="dark"] .appearance-swatch[data-theme="plum"] { --preview-accent:#dfb2e6; }
:root[data-color-mode="dark"] .appearance-swatch[data-theme="sand"] { --preview-accent:#e8c582; }
.large-text .appearance-choice,.large-text .appearance-picker legend { font-size:18px; }
.large-text .appearance-choice { min-height:52px; }
@media(max-width:360px) {
  .appearance-options,.appearance-colors { gap:7px; }
  .appearance-choice { padding:10px 8px; gap:6px; }
  .large-text .appearance-colors { grid-template-columns:1fr; }
}