/* Design tokens. Source of truth: docs/design-system.md. Do not use raw colors in screens. */
:root {
  --bg: #f6f4fb;
  --surface: #ffffff;
  --border: #e6e1f0;
  --border-strong: #cbc3dc;
  --text: #1a1626;
  --text-muted: #474057;
  --accent: #6d28d9;
  --accent-text: #ffffff;
  --accent-soft: #f1eafe;
  --link: #5b21b6;
  --ok: #1f7a4d;
  --ok-soft: #e3f2ea;
  --warn: #8a4307;
  --warn-soft: #fdf0e1;
  --info: #24479e;
  --info-soft: #e6eefb;

  /* Colour: one gradient per problem, all dark enough for white text (≥ 5:1). */
  --on-grad: #ffffff;
  --on-grad-muted: rgb(255 255 255 / 0.9);
  /* A "worth a look" dot on a gradient banner. */
  --on-grad-warn: #fcd34d;
  --on-grad-ink: #4c1d95;
  /* Windows' own red for a hovered close button. */
  --close-hover: #c42b1c;
  --grad-brand: linear-gradient(135deg, #5b21b6 0%, #9d174d 100%);
  --hue-slow: linear-gradient(135deg, #c2410c 0%, #be123c 100%);
  --hue-disk: linear-gradient(135deg, #1d4ed8 0%, #0e7490 100%);
  --hue-adware: linear-gradient(135deg, #047857 0%, #0f766e 100%);
  --hue-internet: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
  --hue-all: var(--grad-brand);
  --glow: 0 18px 40px -18px rgb(91 33 182 / 0.55);
  --font: "Manrope Variable", system-ui, sans-serif;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  /* Solid ring with a gap: at least 3:1 against any background (WCAG 1.4.11). */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --sidebar-width: 232px;
  /* Motion. Short and calm: things settle, nothing bounces for long. */
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110e1a;
    --surface: #1b1727;
    --border: #2e2842;
    --border-strong: #463d60;
    --text: #f1eef8;
    --text-muted: #c3bbd6;
    --accent: #a78bfa;
    --accent-text: #1a1033;
    --accent-soft: #2a1f4a;
    --link: #c4b5fd;
    --glow: 0 18px 44px -16px rgb(157 23 77 / 0.6);
    --ok: #5bc48e;
    --ok-soft: #16301f;
    --warn: #f0a65c;
    --warn-soft: #3a2612;
    --info: #9db7f5;
    --info-soft: #1a2442;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #110e1a;
  --surface: #1b1727;
  --border: #2e2842;
  --border-strong: #463d60;
  --text: #f1eef8;
  --text-muted: #c3bbd6;
  --accent: #a78bfa;
  --accent-text: #1a1033;
  --accent-soft: #2a1f4a;
  --link: #c4b5fd;
  --glow: 0 18px 44px -16px rgb(157 23 77 / 0.6);
  --ok: #5bc48e;
  --ok-soft: #16301f;
  --warn: #f0a65c;
  --warn-soft: #3a2612;
  --info: #9db7f5;
  --info-soft: #1a2442;
  color-scheme: dark;
}