/* ==========================================================================
   Meeow Design System v1 — theme layer (@layer theme, ADR-0023)
   1. The older files' tokens become aliases of --ds-* (same values in light
      mode, so nothing moves) — one source of truth.
   2. Dark mode: page-scoped tokens (--mp-*, --vt-*, --kn-*, --cb-*, --mm-*,
      --nm-*) get dark values on the same elements that declare them, then
      the surfaces the older files hard-code are repainted.
   The landing world (body.is-landing) is a white studio in every theme
   (ADR-0032) and is left alone.
   ========================================================================== */

:root {
  --b-bg: var(--ds-bg);
  --b-surface: var(--ds-surface-1);
  --b-ink: var(--ds-ink-1);
  --b-ink-2: var(--ds-ink-2);
  --b-muted: var(--ds-ink-3);
  --b-hair: var(--ds-line);
  --b-hair-2: var(--ds-line-2);
  --b-cta: var(--ds-action);
  --b-cta-hover: var(--ds-action-hover);
  --b-peach: var(--ds-pet-soft);
  --b-peach-ink: var(--ds-pet);
  --b-sun-soft: var(--ds-warning-soft);
  --b-sun-ink: var(--ds-warning);
  --b-mint-soft: var(--ds-success-soft);
  --b-mint-ink: var(--ds-success);
  --b-sky-soft: var(--ds-info-soft);
  --b-sky-ink: var(--ds-info);
  --b-ease: var(--ds-ease-out);
  --ease-smooth: var(--ds-ease-out);
  --font: var(--ds-font-sans);
  --font-display: var(--ds-font-display);
}

/* ---------------------------------------------------------------- dark: tokens */
:root[data-theme="dark"] {
  --b-warm: var(--ds-surface-2);
  --b-shadow: var(--ds-elev-2);
  --surface: var(--ds-surface-1);
  --paper: var(--ds-surface-1);
  --cream: var(--ds-bg);
  --line: var(--ds-line);
  --line-strong: var(--ds-line-2);
  --ink-soft: var(--ds-ink-3);
  --ink-faint: var(--ds-ink-3);
  --shadow: var(--ds-elev-3);
  --shadow-soft: var(--ds-elev-2);
  --shadow-lift: var(--ds-elev-3);
  --glass: rgba(20, 32, 54, .72);
  --glass-strong: rgba(20, 32, 54, .88);
  --glass-line: rgba(226, 234, 246, .10);
}

:root[data-theme="dark"] .pn,
:root[data-theme="dark"] .pet-gate.pv1,
:root[data-theme="dark"] .kn,
:root[data-theme="dark"] .hv3-hero__copy,
:root[data-theme="dark"] .hv3-services .lx-service-list,
:root[data-theme="dark"] .hv3-services .lx-service,
:root[data-theme="dark"] .hv3-shell .lx-rail,
:root[data-theme="dark"] .hv3-shell .lx-appband {
  --nm-base: var(--ds-surface-2);
  --nm-card: var(--ds-surface-1);
  --nm-dark: rgba(0, 0, 0, .42);
  --nm-light: rgba(255, 255, 255, .035);
}

:root[data-theme="dark"] .pn {
  --mp-page: var(--ds-bg);
  --mp-surface: var(--ds-surface-1);
  --mp-surface-2: var(--ds-surface-2);
  --mp-hair: var(--ds-line);
  --mp-hair-2: var(--ds-line-2);
  --mp-shadow: var(--ds-elev-1);
  --mp-progress: var(--ds-success-mark);
  --mp-due-mark: var(--ds-warning-mark);
  --mp-overdue: #ffb38a;
  --mp-overdue-soft: rgba(255, 140, 90, .15);
  --mp-flag: var(--ds-danger);
  --mp-flag-soft: var(--ds-danger-soft);
  --mp-chart-1: var(--ds-chart-1);
  --mp-chart-2: var(--ds-chart-2);
  --mp-chart-3: var(--ds-chart-3);
  --mp-chart-4: var(--ds-chart-4);
  --mp-heat-0: #1f2d47;
  --mp-heat-1: #16423f;
  --mp-heat-2: #17645b;
  --mp-heat-3: #1d9483;
  --mp-heat-4: #3fd3bf;
}

:root[data-theme="dark"] .vt1 {
  --vt-surface: var(--ds-surface-1);
  --vt-fill: var(--ds-surface-2);
  --vt-line: var(--ds-line);
  --vt-line-2: var(--ds-line-2);
  --vt-shadow: var(--ds-elev-1);
  --vt-shadow-hover: var(--ds-elev-2);
  --vt-select: rgba(32, 201, 181, .14);
  --vt-select-line: rgba(111, 227, 209, .4);
  --vt-red-ink: var(--ds-danger);
  --vt-red-soft: var(--ds-danger-soft);
  --vt-red-line: rgba(255, 143, 134, .28);
}

:root[data-theme="dark"] .kn {
  --kn-surface: var(--ds-surface-1);
  --kn-fill: var(--ds-surface-2);
  --kn-line: var(--ds-line);
  --kn-line-2: var(--ds-line-2);
  --kn-shadow: var(--ds-elev-1);
  --kn-shadow-hover: var(--ds-elev-2);
  --kn-select: rgba(32, 201, 181, .14);
  --kn-select-line: rgba(111, 227, 209, .4);
  --kn-red-ink: var(--ds-danger);
  --kn-red-soft: var(--ds-danger-soft);
  --kn-red-line: rgba(255, 143, 134, .28);
}

:root[data-theme="dark"] .cb1 {
  --cb-surface: var(--ds-surface-1);
  --cb-fill: var(--ds-surface-2);
  --cb-line: var(--ds-line);
  --cb-line-2: var(--ds-line-2);
  --cb-shadow: var(--ds-elev-1);
  --cb-progress: var(--ds-success-mark);
  --cb-track: var(--ds-surface-3);
  --cb-soon-bg: var(--ds-warning-soft);
  --cb-soon-line: rgba(255, 210, 122, .25);
  --cb-raise: var(--ds-elev-1);
}

:root[data-theme="dark"] .mm,
:root[data-theme="dark"] .mm-dialog {
  --mm-fill: var(--ds-surface-2);
  --mm-track: var(--ds-surface-3);
  --mm-card-shadow: var(--ds-elev-2);
}

/* ---------------------------------------------------------------- dark: page chrome */
:root[data-theme="dark"] body:not(.is-landing) {
  background: var(--ds-bg);
  color: var(--ds-ink-1);
}
:root[data-theme="dark"] body:not(.is-landing) :is(h1, h2, h3, h4) { color: var(--ds-ink-1); }
/* Page sections paint light gradients in the page files; one calm night sky instead. */
:root[data-theme="dark"] main > .page:not([data-page="landing"]) {
  background:
    radial-gradient(60rem 30rem at 90% -10%, rgba(63, 211, 191, .08), transparent 70%),
    radial-gradient(40rem 26rem at 0% 40%, rgba(255, 138, 118, .05), transparent 70%),
    var(--ds-bg);
}
/* Mio's stage: a dusk floor rather than a daylight one. */
:root[data-theme="dark"] .pn-stage.mio-slot {
  background:
    radial-gradient(120% 46% at 50% 104%, #1d4a4a 0 44%, transparent 45%),
    radial-gradient(60% 40% at 80% 12%, rgba(63, 211, 191, .16), transparent 70%),
    linear-gradient(180deg, #13263a, #0f2a33);
}
:root[data-theme="dark"] .mm-hero-art, :root[data-theme="dark"] .pn-mapcard > img { background: #1d4a4a; }

/* ---------------------------------------------------------------- dark: surfaces the page files paint white */
:root[data-theme="dark"] :is(
  .hv3-hero, .hv3-need, .hv3-shell .lx-card, .hv3-trust .tr1-card, .hv3-price,
  .sv1-cat, .sv1-filters, .sv1-card, .sv1-btn--soft,
  .mn2-featured, .mn2-item, .sf-call
) { background: var(--ds-surface-1); border-color: var(--ds-line); }
:root[data-theme="dark"] :is(.hv3-seg, .hv3-shell .lx-card-media, .sv1-trust li, .sv1-card__specs li, .mn2-topic small, .site-footer .sf-links) { background: var(--ds-surface-2); border-color: var(--ds-line); }
:root[data-theme="dark"] :is(.lx-ill, .sv1-illus) { background: var(--ds-surface-3); }
:root[data-theme="dark"] .mn2-topic { background: var(--ds-surface-1); box-shadow: inset 0 0 0 1px var(--ds-line-2); }
:root[data-theme="dark"] .lx-tag--mint, :root[data-theme="dark"] .mn2-tag { background: rgba(63, 211, 191, .14); }
:root[data-theme="dark"] .lx-tag--sun { background: rgba(255, 199, 92, .14); }
:root[data-theme="dark"] .lx-tag--sky { background: rgba(120, 186, 255, .14); }
:root[data-theme="dark"] .lx-tag--peach { background: rgba(255, 138, 118, .14); }
:root[data-theme="dark"] .sv1-add { background: var(--ds-action-soft); }
:root[data-theme="dark"] .sv1-hero { background: linear-gradient(120deg, #2b2418 0%, #1a2336 100%); }
:root[data-theme="dark"] .mn2-hero { background: linear-gradient(120deg, #1a2336 0%, #2a1f28 100%); }
:root[data-theme="dark"] .site-footer { background: var(--ds-surface-1); border-top-color: var(--ds-line); }
:root[data-theme="dark"] .pn-tile.is-overdue { background: linear-gradient(180deg, rgba(255, 99, 88, .12), var(--ds-surface-1) 60%); }
:root[data-theme="dark"] .pn-sos-call { color: #fff; background: var(--ds-danger-solid); }
:root[data-theme="dark"] .vt1-draft { background: var(--ds-warning-soft); border-color: transparent; }
:root[data-theme="dark"] .cb1-safe { background: var(--ds-success-soft); border-color: transparent; }
:root[data-theme="dark"] .site-footer .sf-links :is(a, button), :root[data-theme="dark"] .sv1-filter-toggle { color: var(--ds-ink-2); background: var(--ds-surface-2); border-color: var(--ds-line); }
:root[data-theme="dark"] .hv3-seg button[aria-pressed="true"] { background: var(--ds-surface-1); }
:root[data-theme="dark"] :is(.hv3-need:not([aria-pressed="true"]) strong, .hv3-price strong) { color: var(--ds-ink-1); }
:root[data-theme="dark"] .lx-assure span { color: var(--ds-ink-3); }
:root[data-theme="dark"] :is(.tr1-num__code, .lx-appband-copy h2 em) { color: var(--ds-action-ink); }
:root[data-theme="dark"] .mn2-status.is-draft { color: var(--ds-warning); background: var(--ds-warning-soft); }
:root[data-theme="dark"] .hv3-stage.mio-slot { background: linear-gradient(180deg, #2a2233 0%, #2b2330 56%, #33262c 100%); }
:root[data-theme="dark"] .mn2-search { background: var(--ds-surface-1); box-shadow: 0 0 0 1px var(--ds-line-2); }
:root[data-theme="dark"] .mn2-search input { color: var(--ds-ink-1); }
:root[data-theme="dark"] :is(.mn2-urgent, .mn2-flag) { color: var(--ds-danger); background: var(--ds-danger-soft); box-shadow: inset 0 0 0 1px rgba(255, 99, 88, .3); }
:root[data-theme="dark"] .mn2-urgent :is(strong, span, small, p) { color: var(--ds-ink-1); }
:root[data-theme="dark"] .mn2-urgent-ic { background: var(--ds-surface-1); }
:root[data-theme="dark"] :is(.sv1-search, .sv1-sort select, .hv3-search__field) { color: var(--ds-ink-1); background: var(--ds-surface-1); border-color: var(--ds-line-2); }
:root[data-theme="dark"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { color-scheme: dark; }
:root[data-theme="dark"] .pn[data-mode="panel"]:not([data-screen="home"]) .pn-head { background: color-mix(in srgb, var(--ds-bg) 92%, transparent); }
:root[data-theme="dark"] .pn-flag--today { background: var(--ds-warning-soft); }
:root[data-theme="dark"] .pn-item.is-done { background: var(--ds-success-soft); }
:root[data-theme="dark"] :is(.ch-cell.is-l4, .ch-cell.is-l3) { color: var(--ds-ink-inverse); }
:root[data-theme="dark"] .mn2-status.is-reviewed { color: var(--ds-success); background: var(--ds-success-soft); }

/* ---------------------------------------------------------------- light: joy
   Light is the default. Clean white cards on a warm white page, a soft sunny
   and mint glow behind everything, and one pastel hue per product so the
   page reads cheerful but calm. Text stays on white, so contrast is unchanged. */
:root:not([data-theme="dark"]) body:not(.is-landing) { background: var(--ds-bg-tint), var(--ds-bg); background-attachment: fixed; }
/* Mio panel: sun + coral atmosphere (warm, energetic; mint kept for progress). */
:root:not([data-theme="dark"]) body.is-mio-app:not(.is-landing) {
  --ds-bg: #ffeede;
  --ds-bg-tint:
    radial-gradient(circle at 92% 4%, rgba(255, 201, 77, .55), transparent 26rem),
    radial-gradient(circle at 6% 88%, rgba(255, 107, 94, .34), transparent 24rem),
    radial-gradient(circle at 50% 42%, rgba(32, 201, 181, .16), transparent 32rem),
    linear-gradient(180deg, #fff6e8 0%, #ffe4cc 45%, #fff0e2 100%);
  background: var(--ds-bg-tint);
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) body.is-mio-app .pn {
  --nm-base: #ffeede;
  --nm-card: #fffaf4;
  --nm-dark: rgba(196, 120, 72, .22);
  --nm-light: rgba(255, 255, 255, .96);
}

:root:not([data-theme="dark"]) :is(.pn, .pet-gate.pv1, .kn, .hv3-hero__copy, .hv3-services .lx-service-list, .hv3-services .lx-service, .hv3-shell .lx-rail, .hv3-shell .lx-appband) {
  --nm-base: var(--ds-surface-2);
  --nm-card: var(--ds-surface-1);
  --nm-dark: rgba(92, 114, 148, .18);
  --nm-light: rgba(255, 255, 255, .96);
}

:root:not([data-theme="dark"]) .hv3-hero { background: var(--ds-joy-grad); }
:root:not([data-theme="dark"]) .hv3-stage.mio-slot { background: var(--ds-joy-stage); }

:root:not([data-theme="dark"]) .hv3-services .lx-service-list { background: rgba(255, 255, 255, .7); }
:root:not([data-theme="dark"]) .hv3-services .lx-service { background: linear-gradient(155deg, var(--ds-surface-1) 35%, var(--joy, var(--ds-joy-sun)) 130%); }
:root:not([data-theme="dark"]) .hv3-services .lx-service:nth-child(5n + 1) { --joy: var(--ds-joy-mint); }
:root:not([data-theme="dark"]) .hv3-services .lx-service:nth-child(5n + 2) { --joy: var(--ds-joy-peach); }
:root:not([data-theme="dark"]) .hv3-services .lx-service:nth-child(5n + 3) { --joy: var(--ds-joy-sun); }
:root:not([data-theme="dark"]) .hv3-services .lx-service:nth-child(5n + 4) { --joy: var(--ds-joy-sky); }
:root:not([data-theme="dark"]) .hv3-services .lx-service:nth-child(5n) { --joy: var(--ds-joy-lilac); }

:root:not([data-theme="dark"]) .hv3-need:nth-child(5n + 1) .hv3-need__media { background: var(--ds-joy-sky); }
:root:not([data-theme="dark"]) .hv3-need:nth-child(5n + 2) .hv3-need__media { background: var(--ds-joy-sun); }
:root:not([data-theme="dark"]) .hv3-need:nth-child(5n + 3) .hv3-need__media { background: var(--ds-joy-peach); }
:root:not([data-theme="dark"]) .hv3-need:nth-child(5n + 4) .hv3-need__media { background: var(--ds-joy-lilac); }
:root:not([data-theme="dark"]) .hv3-need:nth-child(5n) .hv3-need__media { background: var(--ds-joy-mint); }

:root:not([data-theme="dark"]) .hv3-shell .lx-card { background: var(--ds-surface-1); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n + 1) .lx-card-media { background: linear-gradient(180deg, #fff8e0, var(--ds-joy-sun)); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n + 2) .lx-card-media { background: linear-gradient(180deg, #eefbf7, var(--ds-joy-mint)); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n + 3) .lx-card-media { background: linear-gradient(180deg, #fff1ec, var(--ds-joy-peach)); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n + 4) .lx-card-media { background: linear-gradient(180deg, #eef6fe, var(--ds-joy-sky)); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n + 5) .lx-card-media { background: linear-gradient(180deg, #f5f1fd, var(--ds-joy-lilac)); }
:root:not([data-theme="dark"]) .hv3-shell .lx-card:nth-child(6n) .lx-card-media { background: linear-gradient(180deg, #fff0f5, var(--ds-joy-pink)); }