/* =====================================================================
   design-system/tokens/semantic.css  ·  Layer 3 of 3: SEMANTIC TOKENS  ·  DS v2 (design v4, 2026-10-24)
   ---------------------------------------------------------------------
   Named by PURPOSE (--color-tint), never by colour (--blue-600).
   Components (components.css) reference ONLY these tokens.
   Design v4: white / very light grey surfaces, system blue as the only accent,
   thin separators, cards with a hairline ring instead of heavy shadows, status
   as coloured text, very little glass.
   Themes:
     - no data-theme       -> light (safe for pages that are still being migrated)
     - [data-theme=auto]   -> follows prefers-color-scheme (live); the shell sets it once a page is swept
     - [data-theme=light]  -> light, also on a sub-tree
     - [data-theme=dark]   -> dark (v4 dark), also on a sub-tree
   Scope: at the root this file only defines custom properties, which change nothing by themselves.
   Real properties (color-scheme, color, background) apply only inside DS pages: html.ui-v2 (set by the shells),
   a .ds-root wrapper, or a nested [data-theme] inside them (section 2b). Legacy pages never change.
   The two dark blocks below MUST stay identical (the package test checks).
   Accessibility switches (class on <html>, or the OS setting):
     ds-rm  = reduced motion        ds-rt = reduced transparency
     ds-hc  = more contrast         ds-no-blur = low-end device, no blur
     ds-rt-off = the user chose glass even though the OS asks for reduced transparency
   ===================================================================== */

/* ---------- 1. Scale tokens (theme independent) ---------- */
:root {
  /* Type: v4 uses the platform UI font for Latin (SF Pro / Segoe UI) and Noto for Lao/Thai.
     Line-heights stay Thai/Lao safe: >= 1.4 everywhere. Nothing below 12px (rule book; v4's 10.5-11.5px labels become 12). */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "DS Currency", "Noto Sans Lao", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;   /* codes and kbd only; money is tabular sans (v4) */
  --type-largetitle: 700 32px/44px var(--font-sans);   /* mobile large title (v4 32) */
  --type-title1: 700 26px/36px var(--font-sans);       /* desktop page h1 (v4 26) */
  --type-title2: 700 22px/32px var(--font-sans);       /* detail titles (v4 22) */
  --type-title3: 600 20px/28px var(--font-sans);       /* sheet titles, toolbar h1 (v4 20) */
  --type-headline: 600 16px/24px var(--font-sans);     /* card titles (v4 16) */
  --type-body: 400 16px/24px var(--font-sans);         /* mobile body (desktop 14/20 below) */
  --type-callout: 500 15px/22px var(--font-sans);
  --type-subhead: 400 15px/22px var(--font-sans);      /* mobile secondary lines (desktop 13/18) */
  --type-label: 500 15px/22px var(--font-sans);        /* buttons (v4 500; desktop 14) */
  --type-label-sm: 500 13px/18px var(--font-sans);     /* chips, segmented, small buttons */
  --type-footnote: 400 13px/18px var(--font-sans);
  --type-caption: 400 12px/17px var(--font-sans);      /* times, meta (v4 11.5-12.5 -> 12) */
  --type-tab: 500 12px/16px var(--font-sans);          /* tab bar label (v4 10.5 -> 12, rule-book minimum) */
  --type-numeral: 700 28px/40px var(--font-sans);      /* KPI values: tabular sans (v4) */
  --type-numeral-sm: 600 17px/24px var(--font-sans);
  --type-input: 400 16px/24px var(--font-sans);        /* 16px on mobile stops iOS zooming into fields */
  --track-large: -0.02em;   /* v4 titles; Latin only (applied under :lang(en)) */
  --track-title: -0.015em;
  --track-body: 0em;

  /* Space: 4px grid */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --edge: 16px;   /* mobile screen edge */

  /* Radius (v4): controls 10, list rows / groups 14, cards 16, sheets 20. Concentric: inner = outer - padding */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-group: 14px;
  --radius-card: 16px;
  --radius-sheet: 20px;
  --radius-pill: 999px;

  /* Targets: 44 mobile, 36 on desktop (the v4 36px control family) */
  --hit: 44px;
  --control-h: 44px;

  /* Motion. Enter = spring/ease-out, exit = ease-in and faster, linear only for opacity/colour */
  --dur-press: 180ms;     /* finger down to 0.96 (MOTION_V2 §6, Aus: the x4 slow press felt better) */
  --press-hold: 120ms;    /* minimum visible press after pointerdown (motion.js); the click itself never waits */
  --dur-release: 400ms;   /* soft spring back: 95% of the travel by ~180 ms, settles ~400 ms */
  --dur-micro-in: 193ms;
  --dur-micro-out: 150ms;
  --dur-enter: 354ms;     /* sheet, modal, drawer, page */
  --dur-exit: 240ms;
  --dur-pop: 240ms;       /* chip morph, toast, switch knob */
  --dur-roll: 360ms;      /* rolling digits, per digit */
  --roll-stagger: 24ms;   /* per digit, capped so the whole number lands within 480ms */
  --roll-stagger-max: 120ms;
  --stagger: 20ms;        /* lists: max 8 items, 7 x 20 + 354 <= 500ms */
  /* Origin (MOTION_V2 §4): bubbles, cards and rows land from their source */
  --dur-land: 360ms;
  --land-shift: 12px;
  --land-scale: 0.96;
  --origin-stagger: 28ms; /* max 6 beats: 5 x 28 + 360 = 500ms */
  --dur-parcel: 200ms;
  --dur-send: 150ms;
  --ease-land: var(--ease-out);
  --ease-parcel: var(--ease-out);
  --ease-send: var(--ease-out);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-press: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press-release: var(--ease-out);
  --ease-spring: var(--ease-out);        /* upgraded to linear() springs below */
  --ease-spring-micro: var(--ease-out);
  --ease-spring-pop: var(--ease-out);
  --motion-shift: 1;      /* multiplies every translate; 0 when motion is reduced */
  --press-scale: 0.96;
  --press-scale-icon: 0.92;
  --press-scale-row: 0.985;
  --lift: 0px;            /* v4 is flat: no hover lift */

  /* Layers */
  --z-bar: 20; --z-tabbar: 30; --z-drawer: 50; --z-sheet: 60; --z-toast: 90;

  /* Third-party channels (same in both themes) and paper */
  --channel-facebook: var(--p-facebook);   --channel-on-facebook: var(--p-paper);
  --channel-whatsapp: var(--p-whatsapp);   --channel-on-whatsapp: var(--p-whatsapp-ink);
  --channel-instagram: var(--p-instagram); --channel-on-instagram: var(--p-paper);
  --channel-tiktok: var(--p-tiktok);       --channel-on-tiktok: var(--p-paper);
  --label-ink: var(--p-ink);
  --label-paper: var(--p-paper);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: var(--p-spring-354);
    --ease-spring-micro: var(--p-spring-193);
    --ease-spring-pop: var(--p-spring-240);
    --ease-press-release: var(--p-spring-press-release);
    --ease-land: var(--p-spring-land);
    --ease-parcel: var(--p-spring-parcel);
    --ease-send: var(--p-spring-send);
  }
}
/* Continuous corners: a superellipse looks tighter than a circle at the same radius, so bump ~10% (ADR-001 §5) */
@supports (corner-shape: superellipse(2)) {
  :root { --radius-control: 11px; --radius-group: 15px; --radius-card: 18px; --radius-sheet: 22px; }
}
@media (pointer: fine) and (min-width: 768px) {
  :root { --hit: 36px; --control-h: 36px; --edge: 24px;
    --type-body: 400 14px/20px var(--font-sans); --type-subhead: 400 13px/18px var(--font-sans);
    --type-label: 500 14px/20px var(--font-sans); --type-input: 400 14px/20px var(--font-sans); }
}
/* Reduced motion wins over motion, always: no travel, short crossfades, numbers land instantly */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-shift: 0; --press-scale: 1; --press-scale-icon: 1; --press-scale-row: 1; --lift: 0px;
    --dur-press: 100ms; --press-hold: 0ms; --dur-enter: 160ms; --dur-exit: 120ms; --dur-release: 120ms; --dur-pop: 120ms; --dur-roll: 0ms; --roll-stagger: 0ms; --stagger: 0ms;
    --dur-land: 120ms; --land-scale: 1; --origin-stagger: 0ms; --dur-parcel: 0ms; }
}
:root.ds-rm { --motion-shift: 0; --press-scale: 1; --press-scale-icon: 1; --press-scale-row: 1; --lift: 0px;
  --dur-press: 100ms; --press-hold: 0ms; --dur-enter: 160ms; --dur-exit: 120ms; --dur-release: 120ms; --dur-pop: 120ms; --dur-roll: 0ms; --roll-stagger: 0ms; --stagger: 0ms;
    --dur-land: 120ms; --land-scale: 1; --origin-stagger: 0ms; --dur-parcel: 0ms; }
/* Speed pages (POS, chat composer): feedback <= 150ms, nothing decorative */
.ds-speed { --dur-press: 80ms; --press-hold: 0ms; --dur-release: 150ms; --dur-pop: 150ms; --dur-enter: 150ms; --dur-exit: 120ms; --press-scale: 0.97; --stagger: 0ms; }

/* ---------- 2. Light theme (v4) ---------- */
:root, [data-theme="light"] {
  --shade: var(--p-shade-black);
  --light: var(--p-highlight);

  --color-bg: var(--p-white);
  --color-bg-secondary: var(--p-l-bg2);
  --color-bg-tertiary: var(--p-l-bg3);
  --color-surface: var(--p-white);
  --color-surface-elevated: var(--p-white);
  --color-fill: var(--p-l-fill);
  --color-fill-hover: var(--p-l-fill2);
  --color-text: var(--p-l-text);
  --color-text-secondary: var(--p-l-text2);
  --color-text-tertiary: var(--p-l-text3);
  --color-separator: var(--p-l-sep2);
  --color-separator-mid: var(--p-l-sep);
  --color-separator-strong: var(--p-l-border);
  --color-tint: var(--brand-accent-700);
  --color-tint-hover: var(--brand-accent-800);
  --color-tint-pressed: var(--brand-accent-800);
  --color-tint-fill: var(--brand-accent-600);
  --color-tint-fill-hover: var(--brand-accent-700);
  --color-tint-fill-pressed: var(--brand-accent-800);
  --color-tint-soft: color-mix(in srgb, var(--brand-accent-600) 9%, transparent);
  --color-on-tint: var(--brand-accent-on);
  --color-success: var(--p-l-green);
  --color-success-soft: color-mix(in srgb, var(--p-green-dot) 14%, transparent);
  --color-warning: var(--p-l-orange);
  --color-warning-soft: var(--p-l-yellow-tint);
  --color-warning-fill: var(--p-orange-dot);
  --color-danger: var(--p-l-red);
  --color-danger-hover: var(--p-l-red-hover);
  --color-danger-pressed: var(--p-l-red-pressed);
  --color-danger-soft: color-mix(in srgb, var(--p-l-red) 8%, transparent);
  --color-on-danger: var(--p-paper);
  --color-accent: var(--p-l-indigo);
  --color-focus: var(--brand-accent-600);
  --color-overlay: var(--p-scrim-light);
  --color-surface-inverse: var(--p-l-text);
  --color-text-inverse: var(--p-white);
  --color-toast: var(--p-ink-text);
  --color-on-toast: var(--p-paper);
  --color-toast-action: var(--brand-accent-250);
  --color-nav-hover: var(--p-l-hover);
  --color-nav-selected: var(--p-l-selected);
  --color-seg-thumb: var(--p-l-seg-on);
  --color-switch-off: var(--p-l-switch-off);
  --color-switch-on: var(--p-l-green-switch);
  --color-online: var(--p-green-dot);
  --color-badge: var(--p-l-red);
  --color-on-badge: var(--p-paper);
  --color-bubble-in: var(--p-l-fill);
  --color-bubble-out: var(--brand-accent-600);
  --color-on-bubble-out: var(--p-paper);
  --color-bubble-out-meta: var(--p-paper);
  --color-note: var(--p-l-yellow-tint);
  --brand-accent: var(--brand-accent-500);
  --color-knob: var(--p-paper);
  --color-on-media: var(--p-paper);
  --color-skeleton: var(--p-l-fill);
  --color-skeleton-shine: rgb(var(--light) / 0.7);
  --color-cast: rgb(var(--shade) / 0.10);
  --color-cast-tint: transparent;
  --color-cast-danger: transparent;
  --color-hairline: var(--p-l-sep2);
  --color-inset: transparent;
  --color-track-inset: transparent;
  --color-veil: var(--p-l-bg3);
  --color-press-veil: rgb(var(--shade) / 0.06);
  --color-media-veil: rgb(var(--shade) / 0.2);
  --color-lens: transparent;
  --color-text-shadow-media: rgb(var(--shade) / 0.45);
  --chip-neutral-bg: var(--p-l-fill);
  --chip-neutral-fg: var(--p-l-text);
  --chip-info-bg: color-mix(in srgb, var(--brand-accent-600) 9%, transparent);
  --chip-info-fg: var(--brand-accent-700);
  --chip-success-bg: color-mix(in srgb, var(--p-green-dot) 14%, transparent);
  --chip-success-fg: var(--p-l-green);
  --chip-warning-bg: var(--p-l-yellow-tint);
  --chip-warning-fg: var(--p-l-orange);
  --chip-danger-bg: color-mix(in srgb, var(--p-l-red) 8%, transparent);
  --chip-danger-fg: var(--p-l-red);
  --chip-accent-bg: color-mix(in srgb, var(--p-l-indigo) 10%, transparent);
  --chip-accent-fg: var(--p-l-indigo);
  --chart-1: var(--brand-accent-500);
  --chart-bar: color-mix(in srgb, var(--chart-1) 85%, var(--color-surface));
  --chart-area: color-mix(in srgb, var(--chart-1) 12%, transparent);
  --chart-grid: var(--p-l-sep2);
  --chart-track: var(--p-l-fill2);

  --elev-0: none;
  --elev-1: 0 0 0 1px var(--color-separator);
  --elev-2: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.05), 0 2px 8px rgb(var(--shade) / 0.05);
  --elev-3: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.04), 0 8px 28px rgb(var(--shade) / 0.10);
  --elev-4: 0 0 0 1px var(--color-separator), 0 -1px 2px rgb(var(--shade) / 0.04), 0 -8px 28px rgb(var(--shade) / 0.10);
  --elev-5: 0 1px 2px rgb(var(--shade) / 0.04), 0 8px 28px rgb(var(--shade) / 0.10);

  --btn-neutral-bg: var(--color-fill);
  --btn-sheen: none;
  --btn-sheen-neutral: none;
  --btn-hi: inset 0 0 0 0 transparent;
  --btn-hi-neutral: inset 0 0 0 0 transparent;
  --btn-hi-ink: inset 0 0 0 0 transparent;
  --btn-rim-glass: inset 0 0 0 0 transparent;

  --glass-bg: color-mix(in srgb, var(--color-bg) 96%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--color-bg) 98%, transparent);
  --glass-filter: saturate(1.8) blur(20px);
  --glass-rim: 0 0 0 1px var(--color-separator);
  --glass-shadow: none;
  --glass-specular: none;
  --glass-tint-bg: var(--color-tint-fill);
  --glass-danger-bg: var(--color-danger);
  --glass-media-bg: color-mix(in srgb, var(--p-paper) 14%, transparent);
  --glass-media-bg-hover: color-mix(in srgb, var(--p-paper) 16%, transparent);
  --glass-media-tint-bg: color-mix(in srgb, var(--brand-accent-600) 52%, transparent);
  --glass-media-danger-bg: color-mix(in srgb, var(--p-l-red) 46%, transparent);
  --glass-media-filter: blur(14px) saturate(170%) contrast(0.6) brightness(0.42);
  --glass-media-rim: inset 0 0 0 0.5px rgb(var(--light) / 0.35);
  --glass-media-sheen: none;

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --focus-ring-inset: inset 0 0 0 2px var(--color-focus);
  --focus-ring-media: 0 0 0 2px var(--p-paper), 0 0 0 4.5px var(--color-focus);
}

/* ---------- 3. Dark theme (v4 dark; OS preference, only where the page opted in with data-theme="auto"). Keep identical to block 4 ---------- */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --shade: var(--p-shade-black);
    --light: var(--p-highlight);

    --color-bg: var(--p-d-bg);
    --color-bg-secondary: var(--p-d-bg2);
    --color-bg-tertiary: var(--p-d-bg3);
    --color-surface: var(--p-d-card);
    --color-surface-elevated: var(--p-d-elevated);
    --color-fill: var(--p-d-fill);
    --color-fill-hover: var(--p-d-fill-hover);
    --color-text: var(--p-d-text);
    --color-text-secondary: var(--p-d-text2);
    --color-text-tertiary: var(--p-d-text3);
    --color-separator: var(--p-d-sep2);
    --color-separator-mid: var(--p-d-sep);
    --color-separator-strong: var(--p-d-border);
    --color-tint: var(--brand-accent-300);
    --color-tint-hover: var(--brand-accent-250);
    --color-tint-pressed: var(--brand-accent-300);
    --color-tint-fill: var(--brand-accent-600);
    --color-tint-fill-hover: var(--brand-accent-700);
    --color-tint-fill-pressed: var(--brand-accent-800);
    --color-tint-soft: color-mix(in srgb, var(--brand-accent-500d) 14%, transparent);
    --color-on-tint: var(--brand-accent-on);
    --color-success: var(--p-d-green);
    --color-success-soft: color-mix(in srgb, var(--p-green-dot) 18%, transparent);
    --color-warning: var(--p-d-orange);
    --color-warning-soft: var(--p-d-yellow-tint);
    --color-warning-fill: var(--p-d-orange);
    --color-danger: var(--p-d-red);
    --color-danger-hover: var(--p-d-red-hover);
    --color-danger-pressed: var(--p-d-red-pressed);
    --color-danger-soft: color-mix(in srgb, var(--p-d-red) 10%, transparent);
    --color-on-danger: var(--p-d-on-red);
    --color-accent: var(--p-d-indigo);
    --color-focus: var(--brand-accent-300);
    --color-overlay: var(--p-scrim-dark);
    --color-surface-inverse: var(--p-d-text);
    --color-text-inverse: var(--p-d-bg);
    --color-toast: var(--p-d-toast);
    --color-on-toast: var(--p-paper);
    --color-toast-action: var(--brand-accent-250);
    --color-nav-hover: var(--p-d-hover);
    --color-nav-selected: var(--p-d-selected);
    --color-seg-thumb: var(--p-d-seg-on);
    --color-switch-off: var(--p-d-switch-off);
    --color-switch-on: var(--p-d-green);
    --color-online: var(--p-green-dot);
    --color-badge: var(--p-l-red);
    --color-on-badge: var(--p-paper);
    --color-bubble-in: var(--p-d-fill);
    --color-bubble-out: var(--brand-accent-600);
    --color-on-bubble-out: var(--p-paper);
    --color-bubble-out-meta: var(--p-paper);
    --color-note: var(--p-d-yellow-tint);
    --brand-accent: var(--brand-accent-500d);
    --color-knob: var(--p-paper);
    --color-on-media: var(--p-paper);
    --color-skeleton: var(--p-d-fill);
    --color-skeleton-shine: rgb(var(--light) / 0.06);
    --color-cast: rgb(var(--shade) / 0.5);
    --color-cast-tint: transparent;
    --color-cast-danger: transparent;
    --color-hairline: var(--p-d-sep2);
    --color-inset: transparent;
    --color-track-inset: transparent;
    --color-veil: rgb(var(--light) / 0.03);
    --color-press-veil: rgb(var(--light) / 0.06);
    --color-media-veil: rgb(var(--shade) / 0.2);
    --color-lens: transparent;
    --color-text-shadow-media: rgb(var(--shade) / 0.55);
    --chip-neutral-bg: var(--p-d-fill);
    --chip-neutral-fg: var(--p-d-text);
    --chip-info-bg: color-mix(in srgb, var(--brand-accent-500d) 14%, transparent);
    --chip-info-fg: var(--brand-accent-300);
    --chip-success-bg: color-mix(in srgb, var(--p-green-dot) 18%, transparent);
    --chip-success-fg: var(--p-d-green);
    --chip-warning-bg: var(--p-d-yellow-tint);
    --chip-warning-fg: var(--p-d-orange);
    --chip-danger-bg: color-mix(in srgb, var(--p-d-red) 10%, transparent);
    --chip-danger-fg: var(--p-d-red);
    --chip-accent-bg: color-mix(in srgb, var(--p-d-indigo) 10%, transparent);
    --chip-accent-fg: var(--p-d-indigo);
    --chart-1: var(--brand-accent-500d);
    --chart-bar: color-mix(in srgb, var(--chart-1) 85%, var(--color-surface));
    --chart-area: color-mix(in srgb, var(--chart-1) 18%, transparent);
    --chart-grid: var(--p-d-sep2);
    --chart-track: var(--p-d-fill2);

    --elev-0: none;
    --elev-1: 0 0 0 1px var(--color-separator);
    --elev-2: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.4);
    --elev-3: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.4), 0 10px 32px rgb(var(--shade) / 0.55);
    --elev-4: 0 0 0 1px var(--color-separator), 0 -1px 2px rgb(var(--shade) / 0.4), 0 -10px 32px rgb(var(--shade) / 0.55);
    --elev-5: 0 1px 2px rgb(var(--shade) / 0.4), 0 10px 32px rgb(var(--shade) / 0.55);

    --btn-neutral-bg: var(--color-fill);
    --btn-sheen: none;
    --btn-sheen-neutral: none;
    --btn-hi: inset 0 0 0 0 transparent;
    --btn-hi-neutral: inset 0 0 0 0 transparent;
    --btn-hi-ink: inset 0 0 0 0 transparent;
    --btn-rim-glass: inset 0 0 0 0 transparent;

    --glass-bg: color-mix(in srgb, var(--color-bg) 96%, transparent);
    --glass-bg-strong: color-mix(in srgb, var(--color-bg) 98%, transparent);
    --glass-filter: saturate(1.8) blur(20px);
    --glass-rim: 0 0 0 1px var(--color-separator);
    --glass-shadow: none;
    --glass-specular: none;
    --glass-tint-bg: var(--color-tint-fill);
    --glass-danger-bg: var(--color-danger);
    --glass-media-bg: color-mix(in srgb, var(--p-paper) 14%, transparent);
    --glass-media-bg-hover: color-mix(in srgb, var(--p-paper) 16%, transparent);
    --glass-media-tint-bg: color-mix(in srgb, var(--brand-accent-600) 52%, transparent);
    --glass-media-danger-bg: color-mix(in srgb, var(--p-l-red) 46%, transparent);
    --glass-media-filter: blur(14px) saturate(170%) contrast(0.6) brightness(0.42);
    --glass-media-rim: inset 0 0 0 0.5px rgb(var(--light) / 0.25);
    --glass-media-sheen: none;

    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
    --focus-ring-inset: inset 0 0 0 2px var(--color-focus);
    --focus-ring-media: 0 0 0 2px var(--p-paper), 0 0 0 4.5px var(--color-focus);
  }
}

/* ---------- 4. Dark theme (forced: user choice or a sub-tree). Keep identical to block 3 ---------- */
[data-theme="dark"] {
    --shade: var(--p-shade-black);
    --light: var(--p-highlight);

    --color-bg: var(--p-d-bg);
    --color-bg-secondary: var(--p-d-bg2);
    --color-bg-tertiary: var(--p-d-bg3);
    --color-surface: var(--p-d-card);
    --color-surface-elevated: var(--p-d-elevated);
    --color-fill: var(--p-d-fill);
    --color-fill-hover: var(--p-d-fill-hover);
    --color-text: var(--p-d-text);
    --color-text-secondary: var(--p-d-text2);
    --color-text-tertiary: var(--p-d-text3);
    --color-separator: var(--p-d-sep2);
    --color-separator-mid: var(--p-d-sep);
    --color-separator-strong: var(--p-d-border);
    --color-tint: var(--brand-accent-300);
    --color-tint-hover: var(--brand-accent-250);
    --color-tint-pressed: var(--brand-accent-300);
    --color-tint-fill: var(--brand-accent-600);
    --color-tint-fill-hover: var(--brand-accent-700);
    --color-tint-fill-pressed: var(--brand-accent-800);
    --color-tint-soft: color-mix(in srgb, var(--brand-accent-500d) 14%, transparent);
    --color-on-tint: var(--brand-accent-on);
    --color-success: var(--p-d-green);
    --color-success-soft: color-mix(in srgb, var(--p-green-dot) 18%, transparent);
    --color-warning: var(--p-d-orange);
    --color-warning-soft: var(--p-d-yellow-tint);
    --color-warning-fill: var(--p-d-orange);
    --color-danger: var(--p-d-red);
    --color-danger-hover: var(--p-d-red-hover);
    --color-danger-pressed: var(--p-d-red-pressed);
    --color-danger-soft: color-mix(in srgb, var(--p-d-red) 10%, transparent);
    --color-on-danger: var(--p-d-on-red);
    --color-accent: var(--p-d-indigo);
    --color-focus: var(--brand-accent-300);
    --color-overlay: var(--p-scrim-dark);
    --color-surface-inverse: var(--p-d-text);
    --color-text-inverse: var(--p-d-bg);
    --color-toast: var(--p-d-toast);
    --color-on-toast: var(--p-paper);
    --color-toast-action: var(--brand-accent-250);
    --color-nav-hover: var(--p-d-hover);
    --color-nav-selected: var(--p-d-selected);
    --color-seg-thumb: var(--p-d-seg-on);
    --color-switch-off: var(--p-d-switch-off);
    --color-switch-on: var(--p-d-green);
    --color-online: var(--p-green-dot);
    --color-badge: var(--p-l-red);
    --color-on-badge: var(--p-paper);
    --color-bubble-in: var(--p-d-fill);
    --color-bubble-out: var(--brand-accent-600);
    --color-on-bubble-out: var(--p-paper);
    --color-bubble-out-meta: var(--p-paper);
    --color-note: var(--p-d-yellow-tint);
    --brand-accent: var(--brand-accent-500d);
    --color-knob: var(--p-paper);
    --color-on-media: var(--p-paper);
    --color-skeleton: var(--p-d-fill);
    --color-skeleton-shine: rgb(var(--light) / 0.06);
    --color-cast: rgb(var(--shade) / 0.5);
    --color-cast-tint: transparent;
    --color-cast-danger: transparent;
    --color-hairline: var(--p-d-sep2);
    --color-inset: transparent;
    --color-track-inset: transparent;
    --color-veil: rgb(var(--light) / 0.03);
    --color-press-veil: rgb(var(--light) / 0.06);
    --color-media-veil: rgb(var(--shade) / 0.2);
    --color-lens: transparent;
    --color-text-shadow-media: rgb(var(--shade) / 0.55);
    --chip-neutral-bg: var(--p-d-fill);
    --chip-neutral-fg: var(--p-d-text);
    --chip-info-bg: color-mix(in srgb, var(--brand-accent-500d) 14%, transparent);
    --chip-info-fg: var(--brand-accent-300);
    --chip-success-bg: color-mix(in srgb, var(--p-green-dot) 18%, transparent);
    --chip-success-fg: var(--p-d-green);
    --chip-warning-bg: var(--p-d-yellow-tint);
    --chip-warning-fg: var(--p-d-orange);
    --chip-danger-bg: color-mix(in srgb, var(--p-d-red) 10%, transparent);
    --chip-danger-fg: var(--p-d-red);
    --chip-accent-bg: color-mix(in srgb, var(--p-d-indigo) 10%, transparent);
    --chip-accent-fg: var(--p-d-indigo);
    --chart-1: var(--brand-accent-500d);
    --chart-bar: color-mix(in srgb, var(--chart-1) 85%, var(--color-surface));
    --chart-area: color-mix(in srgb, var(--chart-1) 18%, transparent);
    --chart-grid: var(--p-d-sep2);
    --chart-track: var(--p-d-fill2);

    --elev-0: none;
    --elev-1: 0 0 0 1px var(--color-separator);
    --elev-2: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.4);
    --elev-3: 0 0 0 1px var(--color-separator), 0 1px 2px rgb(var(--shade) / 0.4), 0 10px 32px rgb(var(--shade) / 0.55);
    --elev-4: 0 0 0 1px var(--color-separator), 0 -1px 2px rgb(var(--shade) / 0.4), 0 -10px 32px rgb(var(--shade) / 0.55);
    --elev-5: 0 1px 2px rgb(var(--shade) / 0.4), 0 10px 32px rgb(var(--shade) / 0.55);

    --btn-neutral-bg: var(--color-fill);
    --btn-sheen: none;
    --btn-sheen-neutral: none;
    --btn-hi: inset 0 0 0 0 transparent;
    --btn-hi-neutral: inset 0 0 0 0 transparent;
    --btn-hi-ink: inset 0 0 0 0 transparent;
    --btn-rim-glass: inset 0 0 0 0 transparent;

    --glass-bg: color-mix(in srgb, var(--color-bg) 96%, transparent);
    --glass-bg-strong: color-mix(in srgb, var(--color-bg) 98%, transparent);
    --glass-filter: saturate(1.8) blur(20px);
    --glass-rim: 0 0 0 1px var(--color-separator);
    --glass-shadow: none;
    --glass-specular: none;
    --glass-tint-bg: var(--color-tint-fill);
    --glass-danger-bg: var(--color-danger);
    --glass-media-bg: color-mix(in srgb, var(--p-paper) 14%, transparent);
    --glass-media-bg-hover: color-mix(in srgb, var(--p-paper) 16%, transparent);
    --glass-media-tint-bg: color-mix(in srgb, var(--brand-accent-600) 52%, transparent);
    --glass-media-danger-bg: color-mix(in srgb, var(--p-l-red) 46%, transparent);
    --glass-media-filter: blur(14px) saturate(170%) contrast(0.6) brightness(0.42);
    --glass-media-rim: inset 0 0 0 0.5px rgb(var(--light) / 0.25);
    --glass-media-sheen: none;

    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
    --focus-ring-inset: inset 0 0 0 2px var(--color-focus);
    --focus-ring-media: 0 0 0 2px var(--p-paper), 0 0 0 4.5px var(--color-focus);
}

/* ---------- 2b. Real properties, scoped to DS pages only (never legacy pages) ---------- */
:root.ui-v2:not([data-theme="dark"]) { color-scheme: light; }
:root.ui-v2[data-theme="dark"] { color-scheme: dark; }
/* sub-trees and .ds-root wrappers reset both colour and color-scheme, so a dark island in a light page is readable */
:is(.ui-v2, .ds-root, .ds-body, [data-theme]) [data-theme="light"], .ds-root[data-theme="light"] { color-scheme: light; color: var(--color-text); }
.ds-root:not([data-theme]) { color: var(--color-text); }
:is(.ui-v2, .ds-root, .ds-body, [data-theme]) [data-theme="dark"], .ds-root[data-theme="dark"] { color-scheme: dark; color: var(--color-text); }
:is(.ui-v2, .ds-root, .ds-body, [data-theme]) [data-theme="auto"], .ds-root[data-theme="auto"] { color-scheme: light; color: var(--color-text); }
/* a nested theme island gets its theme's page background (zero specificity: any component background still wins; never on <html>) */
:where(:is(.ui-v2, .ds-root, .ds-body, [data-theme]) [data-theme], .ds-root[data-theme]) { background-color: var(--color-bg); }
@media (prefers-color-scheme: dark) {
  :root.ui-v2[data-theme="auto"], :is(.ui-v2, .ds-root, .ds-body, [data-theme]) [data-theme="auto"], .ds-root[data-theme="auto"] { color-scheme: dark; }
}

/* ---------- 5. Material fallbacks (after the theme blocks; selectors out-rank them) ---------- */
/* No backdrop-filter support: bars become solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root, :root [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
    --glass-media-bg: var(--p-l-text); --glass-media-bg-hover: var(--p-d-fill); --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; }
}
/* Low-end device (head script: deviceMemory <= 2 or cores <= 4): no blur, near-solid */
:root.ds-no-blur, :root.ds-no-blur [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
  --glass-media-bg: color-mix(in srgb, var(--p-l-text) 82%, transparent); --glass-media-bg-hover: color-mix(in srgb, var(--p-l-text) 74%, transparent);
  --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; }
/* Reduced transparency (OS setting or html.ds-rt): every material is solid */
@media (prefers-reduced-transparency: reduce) {
  :root:not(.ds-rt-off), :root:not(.ds-rt-off) [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
    --glass-media-bg: var(--p-l-text); --glass-media-bg-hover: var(--p-d-fill); --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; --color-lens: transparent; }
}
:root.ds-rt, :root.ds-rt [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
  --glass-media-bg: var(--p-l-text); --glass-media-bg-hover: var(--p-d-fill); --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; --color-lens: transparent; }
/* More contrast (OS setting or html.ds-hc): solid materials, visible 1px edges on cards and controls */
@media (prefers-contrast: more) {
  :root:root, :root [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
    --color-separator: var(--color-separator-strong); --color-separator-mid: var(--color-separator-strong); --color-text-tertiary: var(--color-text-secondary);
    --glass-media-bg: var(--p-l-text); --glass-media-bg-hover: var(--p-d-fill); --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; --color-lens: transparent; }
}
:root.ds-hc, :root.ds-hc [data-theme] { --glass-bg: var(--color-bg); --glass-bg-strong: var(--color-bg); --glass-filter: none;
  --color-separator: var(--color-separator-strong); --color-separator-mid: var(--color-separator-strong); --color-text-tertiary: var(--color-text-secondary);
  --glass-media-bg: var(--p-l-text); --glass-media-bg-hover: var(--p-d-fill); --glass-media-tint-bg: var(--brand-accent-600); --glass-media-danger-bg: var(--p-l-red); --glass-media-filter: none; --color-lens: transparent; }