/* Explicit light / dark modes, selected before first paint. */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-card: #ffffff;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --border-color: #e5e5ea;
  --accent-color: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --success: #34c759;
  --success-press: #2fb950;
  --warning: #ff9f0a;
  --danger: #ff3b30;
  --error-color: #ff3b30;
  --overlay: rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-up: 0 -4px 20px rgba(0,0,0,0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --ui-canvas: #f6f6f4;
  --ui-surface: #fbfbfa;
  --ui-surface-raised: #f0f0ee;
  --ui-ink: #171719;
  --ui-muted: #68686f;
  --ui-faint: #929299;
  --ui-line: rgba(23, 23, 25, .09);
  --ui-line-strong: rgba(23, 23, 25, .15);
  --ui-solid: #1c1c1f;
  --ui-on-solid: #f8f8f6;
  --ui-acrylic: color-mix(in srgb, var(--ui-surface) 68%, transparent);
  --ui-acrylic-soft: color-mix(in srgb, var(--ui-surface) 46%, transparent);
  --ui-header-acrylic: rgba(251, 251, 250, .64);
  --ui-overlay: rgba(12, 12, 14, .52);
  --ui-focus: rgba(23, 23, 25, .24);
  --ui-shadow-sm: 0 1px 2px rgba(18, 18, 20, .04), 0 8px 24px rgba(18, 18, 20, .05);
  --ui-shadow-md: 0 18px 52px rgba(18, 18, 20, .11);
  --ui-shadow-lg: 0 32px 90px rgba(18, 18, 20, .16);
  --ui-r-sm: 8px;
  --ui-r-md: 12px;
  --ui-r-lg: 16px;
  --ui-r-xl: 20px;
  --ui-r-2xl: 24px;
  --ui-ease: cubic-bezier(.16, 1, .3, 1);
  --ui-fast: 160ms;
  --ui-normal: 280ms;
  --discovery-available: #237947;
  --discovery-warning: #915807;
}
:root[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-card: #2c2c2e;
  --text-primary: #f5f5f7;
  --text-secondary: #b0b0b7;
  --text-tertiary: #636366;
  --border-color: #38383a;
  --accent-color: #0a84ff;
  --accent-hover: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --success: #30d158;
  --success-press: #28bd4d;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --error-color: #ff453a;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-up: 0 -4px 20px rgba(0,0,0,0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --ui-canvas: #101011;
  --ui-surface: #18181a;
  --ui-surface-raised: #222225;
  --ui-ink: #f1f1ef;
  --ui-muted: #b0b0b7;
  --ui-faint: #77777f;
  --ui-line: rgba(241, 241, 239, .09);
  --ui-line-strong: rgba(241, 241, 239, .16);
  --ui-solid: #eeeeec;
  --ui-on-solid: #151517;
  --ui-acrylic: color-mix(in srgb, var(--ui-surface) 68%, transparent);
  --ui-acrylic-soft: color-mix(in srgb, var(--ui-surface) 46%, transparent);
  --ui-header-acrylic: rgba(238, 238, 236, .07);
  --ui-overlay: rgba(3, 3, 4, .68);
  --ui-focus: rgba(241, 241, 239, .28);
  --ui-shadow-sm: 0 1px 2px rgba(2, 2, 3, .22), 0 10px 28px rgba(2, 2, 3, .18);
  --ui-shadow-md: 0 20px 56px rgba(2, 2, 3, .32);
  --ui-shadow-lg: 0 36px 100px rgba(2, 2, 3, .46);
  --ui-r-sm: 8px;
  --ui-r-md: 12px;
  --ui-r-lg: 16px;
  --ui-r-xl: 20px;
  --ui-r-2xl: 24px;
  --ui-ease: cubic-bezier(.16, 1, .3, 1);
  --ui-fast: 160ms;
  --ui-normal: 280ms;
  --discovery-available: #78d99e;
  --discovery-warning: #f3c57b;
}
:root[data-theme="dark"] .preview-notice { background:#352d1d; color:#f3cf85; }