/* Semantic surfaces for the existing cream / orange / olive workspace.
   CSS also follows the OS when JavaScript or browser storage is unavailable. */
:root {
  color-scheme: light dark;
  --surface-chrome:#fafaf6; --surface-soft:#f0f1e9; --surface-input:#fffefa;
  --surface-hover:#f4f6ed; --surface-selected:#e9efde;
  --text-soft:#6c785f; --text-strong:#3e5033; --control-line:#87937a;
  --good-bg:#eaf0df; --good-text:#3e5b2e; --warning-bg:#f7efd8; --warning-text:#886525;
  --danger-bg:#f7e8e0; --danger-text:#a7472e; --neutral-bg:#eef0eb; --neutral-text:#65735d;
  --attention-bg:#fbf9f0; --attention-text:#887448; --auth-surface:#eeeae0;
  --primary-bg:#bd522f; --primary-text:#fff; --primary-hover:#a94427; --focus:#849d67;
  --overlay:#28352245; --shadow:#10201418;
}
:root:has(>head>meta[name="color-scheme"][content="light"]) { color-scheme:light; }
:root:has(>head>meta[name="color-scheme"][content="dark"]) {
  color-scheme:dark;
  --bg:#171d19; --panel:#222a24; --ink:#e8eade; --muted:#adb6a6; --line:#465043;
  --accent:#f0a080; --accent-light:#3b2c24; --green:#a9c995; --olive:#aec796; --olive-light:#303d2b;
  --surface-chrome:#1c231e; --surface-soft:#2a332b; --surface-input:#1b241d;
  --surface-hover:#303b2e; --surface-selected:#35472e;
  --text-soft:#b3bda7; --text-strong:#d1dfbc; --control-line:#748269;
  --good-bg:#2d402c; --good-text:#c4dfaa; --warning-bg:#443c25; --warning-text:#f0d389;
  --danger-bg:#482f26; --danger-text:#ffb29a; --neutral-bg:#303a30; --neutral-text:#b8c5ad;
  --attention-bg:#3d3625; --attention-text:#e5d29d; --auth-surface:#252c22;
  --primary-bg:#dd865f; --primary-text:#172015; --primary-hover:#efa17d; --focus:#b3cd93;
  --overlay:#0009; --shadow:#0005;
}
/* Same dark tokens for the no-override system case, including before JS runs. */
@media(prefers-color-scheme:dark) {
  :root:has(>head>meta[name="color-scheme"][content="light dark"]) {
    --bg:#171d19; --panel:#222a24; --ink:#e8eade; --muted:#adb6a6; --line:#465043;
    --accent:#f0a080; --accent-light:#3b2c24; --green:#a9c995; --olive:#aec796; --olive-light:#303d2b;
    --surface-chrome:#1c231e; --surface-soft:#2a332b; --surface-input:#1b241d;
    --surface-hover:#303b2e; --surface-selected:#35472e;
    --text-soft:#b3bda7; --text-strong:#d1dfbc; --control-line:#748269;
    --good-bg:#2d402c; --good-text:#c4dfaa; --warning-bg:#443c25; --warning-text:#f0d389;
    --danger-bg:#482f26; --danger-text:#ffb29a; --neutral-bg:#303a30; --neutral-text:#b8c5ad;
    --attention-bg:#3d3625; --attention-text:#e5d29d; --auth-surface:#252c22;
    --primary-bg:#dd865f; --primary-text:#172015; --primary-hover:#efa17d; --focus:#b3cd93;
    --overlay:#0009; --shadow:#0005;
  }
}
html,body { background:var(--bg); color:var(--ink); }
:root :where(button,a,input,select,textarea,[tabindex]):focus-visible { outline-color:var(--focus); }
::selection { background:var(--surface-selected); color:var(--ink); }
:root :is(input,select,textarea) { accent-color:var(--olive); }
:root input::placeholder,:root textarea::placeholder { color:var(--muted); opacity:1; }

/* Navigation and workspace surfaces. */
:root :is(.sidebar,.topbar) { background:var(--surface-chrome); border-color:var(--line); }
:root :is(.workspace-label,.workspace-avatar,.user-avatar,.customer-avatar) { background:var(--surface-soft); border-color:var(--line); color:var(--text-soft); }
:root :is(.nav-label,.nav-item,.local-note,.local-note small,.topbar,.crumb,.page-footer) { color:var(--muted); }
:root .local-note { border-color:var(--line); }
:root .nav-item:hover { background:var(--surface-hover); }
:root .nav-item.active,:root .nav-item.active:hover { background:var(--accent-light); color:var(--accent); }
:root .nav-item small { background:var(--accent-light); color:var(--accent); }
:root :is(.order-panel,.brand-card,.product-card,.production-card,dialog,.drawer) { background:var(--panel); border-color:var(--line); color:var(--ink); box-shadow:0 1px 3px var(--shadow); }
:root :is(dialog header,dialog footer,.drawer>header) { background:var(--surface-chrome); border-color:var(--line); }
:root dialog::backdrop { background:var(--overlay); }
:root .drawer-backdrop { background:var(--overlay); }
:root :is(.btn,.btn.quiet) { background:var(--panel); border-color:var(--control-line); color:var(--ink); }
:root :is(.btn:hover,.btn.quiet:hover) { background:var(--surface-hover); border-color:var(--focus); }
:root .btn.primary { background:var(--primary-bg); border-color:var(--primary-bg); color:var(--primary-text); }
:root .btn.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
:root .text-button { color:var(--accent); }
:root .icon-button { color:var(--muted); }
:root .icon-button:hover { color:var(--ink); background:var(--surface-hover); }

/* Summary cards, list controls and native form elements. */
:root .work-stat { background:var(--panel); border-color:var(--line); }
:root :is(.work-stat.production,.work-stat.ready) { background:var(--surface-soft); border-color:var(--line); }
:root .work-stat.due.has-overdue { background:var(--danger-bg); border-color:var(--line); }
:root .work-stat strong { color:var(--text-strong); }
:root .work-stat.due.has-overdue strong { color:var(--danger-text); }
:root :is(.work-stat>span,.work-stat>span svg,.work-stat small) { color:var(--text-soft); }
:root .work-stat:hover { background:var(--surface-hover); border-color:var(--focus); }
:root .work-stat[aria-pressed=true] { border-color:var(--focus); box-shadow:inset 0 0 0 1px var(--focus); }
:root :is(.toolbar,.filter-tabs,.table-bottom,.board-summary) { background:var(--panel); border-color:var(--line); color:var(--muted); }
:root .filter-tabs button { color:var(--muted); }
:root .filter-tabs button.active { color:var(--accent); border-color:var(--accent); }
:root :is(.filter-tabs small,.panel-title h2>span,.view-switch) { background:var(--surface-soft); border-color:var(--line); color:var(--text-soft); }
:root .view-switch button { color:var(--muted); }
:root .view-switch button[aria-pressed=true] { background:var(--panel); color:var(--text-strong); box-shadow:0 1px 3px var(--shadow); }
:root :is(.search,.toolbar select,.field input,.field select,.field textarea,.logo-upload input[type=file]) { background:var(--surface-input); color:var(--ink); border-color:var(--control-line); }
:root .search input { color:var(--ink); background:transparent; }
:root :is(.field input,.field select,.field textarea):focus { border-color:var(--focus); box-shadow:0 0 0 2px var(--surface-selected); }
:root .search:focus-within { outline-color:var(--focus); }
:root :is(.field>span,.check-label,.hint,.field-help) { color:var(--muted); }
:root :is(.notice,.work-filter-chip,.personalization) { background:var(--attention-bg); border-color:var(--line); color:var(--attention-text); }
:root .form-error,:root .post-select-error { color:var(--danger-text); }
:root .post-product-choice select:user-invalid { border-color:var(--danger-text); }
:root :is(.bulk-actions,.deadline-detail,.bundle-packing,.catalog-bundle-group) { background:var(--good-bg); border-color:var(--line); }
:root :is(.bulk-actions>strong,.bulk-actions .text-button,.bundle-packing>strong,.catalog-listing-heading .catalog-group-note) { color:var(--good-text); }

/* Sticky headers and row headers must remain opaque in both schemes. */
:root #orders-table table,:root #orders-table td,:root #orders-table tbody th { background:var(--panel); border-color:var(--line); color:var(--ink); }
:root #orders-table thead,:root #orders-table thead th { background:var(--surface-soft); color:var(--text-soft); border-color:var(--line); }
:root #orders-table tr:hover td,:root #orders-table tr:hover th { background:var(--surface-hover); }
:root #orders-table tr:has(input:checked) td,:root #orders-table tr:has(input:checked) th { background:var(--surface-selected); }
:root #orders-table :is(.customer-cell small,td>small,.order-row-heading>small),:root :is(.brand-text,.table-bottom span,.card-bottom span) { color:var(--text-soft); }
:root .order-link { color:var(--text-strong); }
:root .order-link:hover { color:var(--accent); }
:root .table-scroll { scrollbar-color:var(--control-line) var(--panel); }
:root .lane-cards { scrollbar-color:var(--control-line) transparent; }

/* Status colors retain their meaning without bright backgrounds. */
:root :is(.badge,.pill,.channel-mark) { background:var(--neutral-bg); color:var(--neutral-text); }
:root :is(.badge.ready,.pill.green) { background:var(--good-bg); color:var(--good-text); }
:root .badge.production { background:var(--warning-bg); color:var(--warning-text); }
:root :is(.badge.payment_open,.badge.needs_review,.channel-mark.etsy) { background:var(--danger-bg); color:var(--danger-text); }
:root :is(.badge.shipped,.badge.cancelled) { background:var(--neutral-bg); color:var(--neutral-text); }
:root .channel-mark.ebay { background:var(--surface-soft); color:var(--ink); }
:root :is(.shipping-deadline.overdue,.shipping-deadline.today) { color:var(--danger-text); }
:root .shipping-deadline.tomorrow { color:var(--good-text); }
:root :is(.shipping-deadline.closed,.shipping-deadline.unknown,.shipping-deadline small) { color:var(--muted); }

/* Production, product and Etsy import surfaces. Real logos/images are not recolored. */
:root .production-board { background:var(--surface-chrome); }
:root .production-lane { background:var(--surface-soft); border-color:var(--line); }
:root .production-lane>header { background:var(--surface-soft); border-color:var(--line); }
:root .production-lane.prepare>header { background:var(--warning-bg); }
:root .production-lane.ready>header { background:var(--good-bg); }
:root :is(.production-lane h3,.lane-count,.production-card-open .production-quantity) { color:var(--text-strong); }
:root .lane-count { background:var(--surface-selected); }
:root :is(.lane-step,.production-lane>header p,.production-card-top label,.production-card-open>span,.production-card-footer>span,.lane-empty) { color:var(--text-soft); }
:root .production-card-footer { border-color:var(--line); }
:root .production-card-open:hover { background:var(--surface-hover); }
:root :is(.product-visual,.catalog-row-heading>img,.empty-icon,.logo-upload,.post-products,.catalog-listing-heading,.line-item,address,.mail-body) { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
:root :is(.product-visual,.product-postage,.product-postage strong,.add-card,.add-card strong) { color:var(--text-soft); }
:root .add-card { border-color:var(--control-line); }
:root .add-card:hover { background:var(--surface-hover); }
:root .catalog-listing-group { background:var(--panel); border-color:var(--line); }
:root .catalog-listing-group.bundle-active { border-color:var(--focus); }
:root .bundle-active .catalog-listing-heading { background:var(--good-bg); }
:root :is(.post-product-price,.integration-row .integration-copy>strong) { color:var(--ink); }
:root .post-product-row { border-color:var(--line); }
:root :is(.post-product-info,.post-catalog-status,.post-product-summary) { color:var(--muted); }

/* Service configuration and settings categories. */
:root .settings-sections button { background:var(--panel); border-color:var(--control-line); color:var(--muted); }
:root .settings-sections button[aria-pressed=true] { background:var(--surface-selected); border-color:var(--focus); color:var(--text-strong); }
:root .integration-symbol { background:var(--surface-soft); border-color:var(--line); color:var(--muted); }
:root .integration-configured .integration-symbol,:root .integration-configured .integration-access,:root .integration-automation.is-enabled { background:var(--good-bg); border-color:var(--line); color:var(--good-text); }
:root .integration-automation.is-paused { background:var(--neutral-bg); border-color:var(--line); color:var(--neutral-text); }
:root .integration-missing .integration-access { color:var(--muted); }
:root .integration-configured>.btn { background:var(--panel); color:var(--good-text); border-color:var(--control-line); }
:root .integration-configured>.btn:hover { background:var(--surface-hover); }
:root .label-sheet { background:var(--surface-soft); border-color:var(--line); }
:root .label-sheet button { background:var(--panel); color:var(--muted); border-color:var(--control-line); }
:root .label-sheet button.used { background:var(--neutral-bg); color:var(--muted); }
:root .label-sheet button.next { background:var(--good-bg); color:var(--good-text); border-color:var(--focus); }
:root :is(.detail-section>p,.detail-item small,.timeline>div,.timeline small,.mail-meta span,.deadline-detail h3,.deadline-help) { color:var(--text-soft); }
:root .timeline i { background:var(--control-line); }
:root .auth-story { background:var(--auth-surface); }
:root .auth-story h1 { color:var(--ink); }
:root :is(.auth-story p:not(.eyebrow),.auth-story>small,.auth-foot) { color:var(--muted); }
:root #toast { background:var(--ink); color:var(--bg); }

/* Three native radio choices, with decorative previews of both palettes. */
.theme-choices{border:0;padding:0;margin:20px 0 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.theme-choice{min-width:0;border:1px solid var(--control-line);border-radius:9px;padding:10px;cursor:pointer;background:var(--panel)}
.theme-choice:has(input:checked){background:var(--surface-selected);border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.theme-choice:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.theme-choice-label{display:flex;gap:7px;align-items:center;margin-top:12px;font-size:12px;color:var(--ink)}
.theme-choice-label input{margin:0;width:15px;height:15px;accent-color:var(--olive)}
.theme-choice small{display:block;font-size:10px;color:var(--text-soft);margin-top:5px;line-height:1.5}
.theme-preview{display:block;position:relative;height:48px;border-radius:5px;overflow:hidden;border:1px solid #9ca28f;background:#f5f4ef}
.theme-preview i{position:absolute;inset:0 auto 0 0;width:20%;background:#e0e4d7}
.theme-preview b,.theme-preview em{position:absolute;left:28%;right:9%;height:9px;top:10px;border-radius:2px;background:#fffefa;border:1px solid #cdd3c4}
.theme-preview em{top:26px;background:#dd865f;border:0;right:28%}
.theme-preview-dark{background:#171d19}.theme-preview-dark i{background:#334030}.theme-preview-dark b{background:#263023;border-color:#718168}
.theme-preview-system{background:linear-gradient(90deg,#f5f4ef 50%,#171d19 50%)}.theme-preview-system i{background:#b2bea5}.theme-preview-system b{background:linear-gradient(90deg,#fffefa 35%,#263023 35%);border-color:#9ca28f}
@media(max-width:420px){.theme-choices{gap:7px}.theme-choice{padding:8px}.theme-choice-label{gap:5px;font-size:11px}}
@media(forced-colors:active){.theme-choice:has(input:checked){border:2px solid Highlight}.theme-preview{forced-color-adjust:none}.theme-choice-label input{forced-color-adjust:auto}}

/* Paper stays light regardless of the UI preference. No image/PDF filters. */
:root .print-sheet,:root .print-label { color-scheme:light; background:#fff; color:#000; }
@media print {
  :root,:root:has(>head>meta[name="color-scheme"][content]) { color-scheme:light!important; --bg:#fff; --panel:#fff; --ink:#000; --muted:#333; --line:#aaa; --surface-chrome:#fff; --surface-soft:#fff; --text-soft:#333; --text-strong:#000; }
  html,body { background:#fff!important; color:#000!important; }
  :root .print-label small { color:#555; }
}