/* dark.css — the dark theme. The mockup was light only; this redefines the
   tokens and patches the handful of colours app.css hard-codes. Generated in
   two copies on purpose: one follows the phone (unless Light is forced), one
   applies when Dark is forced from Location & data. Keep them in step. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:#1A1815; --paper:#24211D; --ink:#EEE7DB; --ink-soft:#A99F90; --line:#3A342D;
    --clay:#C4643F; --clay-soft:#3B271E; --olive:#8C955C; --olive-soft:#2A2D20;
    --sky:#8DAECB; --sky-soft:#1D2730; --surround:#12110F;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 24px rgba(0,0,0,.30);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .wx-note{ color:#A9C3D8; }
  :root:not([data-theme="light"]) .mode{ background:#2A2621; }
  :root:not([data-theme="light"]) .fit-why{ color:#CFC6B8; }
  :root:not([data-theme="light"]) .streak, :root:not([data-theme="light"]) .item .mat, :root:not([data-theme="light"]) .cpw, :root:not([data-theme="light"]) .cal-detail .d-feel{ color:#C3CB94; }
  :root:not([data-theme="light"]) .nudge, :root:not([data-theme="light"]) .gap-card{ background:#2B211B; border-color:#4A3226; }
  :root:not([data-theme="light"]) .chip.on, :root:not([data-theme="light"]) .pack-row input:checked + .box, :root:not([data-theme="light"]) .plan-lock.locked{ color:#15160F; }
  :root:not([data-theme="light"]) .item .art .wash{ background:rgba(26,24,21,.74); }
  :root:not([data-theme="light"]) .badge{ color:#E3A07F; }
  :root:not([data-theme="light"]) .photo-drop, :root:not([data-theme="light"]) .warmth .w, :root:not([data-theme="light"]) .slot, :root:not([data-theme="light"]) .chip-add, :root:not([data-theme="light"]) .pack-row .box{ border-color:#5A5247; }
  :root:not([data-theme="light"]) .laundry{ border-color:#2F3D49; }
  :root:not([data-theme="light"]) .laundry .ic, :root:not([data-theme="light"]) .laundry .tag{ color:#A9C3D8; }
  :root:not([data-theme="light"]) .ob-dots span{ background:#4A443B; }
  :root:not([data-theme="light"]) .tabbar{ background:color-mix(in srgb, var(--paper) 92%, #000); }
  :root:not([data-theme="light"]) .scrim{ background:rgba(0,0,0,.55); }
  :root:not([data-theme="light"]) .layer-art svg, :root:not([data-theme="light"]) .item .art svg{ filter:drop-shadow(0 0 1px rgba(255,255,255,.18)); }
  :root:not([data-theme="light"]) .fit-warn{ background:#3B271E; color:#E9B597; }
}

:root[data-theme="dark"] {
  --cream:#1A1815; --paper:#24211D; --ink:#EEE7DB; --ink-soft:#A99F90; --line:#3A342D;
    --clay:#C4643F; --clay-soft:#3B271E; --olive:#8C955C; --olive-soft:#2A2D20;
    --sky:#8DAECB; --sky-soft:#1D2730; --surround:#12110F;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 24px rgba(0,0,0,.30);
    color-scheme:dark;
}
  :root[data-theme="dark"] .wx-note{ color:#A9C3D8; }
  :root[data-theme="dark"] .mode{ background:#2A2621; }
  :root[data-theme="dark"] .fit-why{ color:#CFC6B8; }
  :root[data-theme="dark"] .streak, :root[data-theme="dark"] .item .mat, :root[data-theme="dark"] .cpw, :root[data-theme="dark"] .cal-detail .d-feel{ color:#C3CB94; }
  :root[data-theme="dark"] .nudge, :root[data-theme="dark"] .gap-card{ background:#2B211B; border-color:#4A3226; }
  :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .pack-row input:checked + .box, :root[data-theme="dark"] .plan-lock.locked{ color:#15160F; }
  :root[data-theme="dark"] .item .art .wash{ background:rgba(26,24,21,.74); }
  :root[data-theme="dark"] .badge{ color:#E3A07F; }
  :root[data-theme="dark"] .photo-drop, :root[data-theme="dark"] .warmth .w, :root[data-theme="dark"] .slot, :root[data-theme="dark"] .chip-add, :root[data-theme="dark"] .pack-row .box{ border-color:#5A5247; }
  :root[data-theme="dark"] .laundry{ border-color:#2F3D49; }
  :root[data-theme="dark"] .laundry .ic, :root[data-theme="dark"] .laundry .tag{ color:#A9C3D8; }
  :root[data-theme="dark"] .ob-dots span{ background:#4A443B; }
  :root[data-theme="dark"] .tabbar{ background:color-mix(in srgb, var(--paper) 92%, #000); }
  :root[data-theme="dark"] .scrim{ background:rgba(0,0,0,.55); }
  :root[data-theme="dark"] .layer-art svg, :root[data-theme="dark"] .item .art svg{ filter:drop-shadow(0 0 1px rgba(255,255,255,.18)); }
  :root[data-theme="dark"] .fit-warn{ background:#3B271E; color:#E9B597; }

/* Forcing Light on a dark phone must also undo app.css's own dark surround. */
:root[data-theme="light"] { color-scheme:light; }