:root {
  --accent: #23968b;
  --accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-16: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-18: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-22: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-50: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 55%, white);
  --on-accent: #0d1a18;

  --bg: #000000;
  --bg-deep: oklch(18% 0.01 250);
  --bg-sunken: oklch(21% 0.01 250);
  --panel-bg: oklch(27% 0.01 250);
  --panel-bg-2: oklch(26% 0.01 250);
  --drawer-bg: oklch(22% 0.01 250);
  --bg-toolbar: oklch(24.5% 0.01 250);
  --bg-winbar: oklch(23% 0.01 250);
  --bg-hover: oklch(31% 0.01 250);

  --text: oklch(93% 0.004 250);
  --text-2: oklch(85% 0.004 250);
  --text-3: oklch(79% 0.004 250);
  --text-4: oklch(71% 0.006 250);
  --text-5: oklch(59% 0.006 250);
  --text-6: oklch(51% 0.008 250);

  --line: oklch(35% 0.01 250);
  --line-soft: oklch(30% 0.01 250);
  --line-input: oklch(37% 0.01 250);

  --canvas-line: oklch(45% 0.01 250);

  --ok-text: oklch(78% 0.1 145);
  --ok-bg: oklch(78% 0.1 145 / 0.12);
  --ok-border: oklch(78% 0.1 145 / 0.35);
  --warn: oklch(70% 0.14 55);
  --warn-bg: oklch(70% 0.14 55 / 0.14);
  --danger: oklch(63% 0.19 25);
  --danger-bg: oklch(63% 0.19 25 / 0.14);
  --danger-border: oklch(63% 0.19 25 / 0.4);

  --shadow-win: 0 12px 32px oklch(0% 0 0 / 0.4);
  --shadow-drawer: -8px 0 24px oklch(0% 0 0 / 0.25);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.2), 0 8px 20px oklch(0% 0 0 / 0.16);
  --shadow-menu: 0 8px 24px oklch(0% 0 0 / 0.35);

  /* categorical palette — stat icons, avatars, chart series, kanban labels */
  --blue: oklch(66% 0.15 250);
  --purple: oklch(60% 0.18 300);
  --pink: oklch(66% 0.18 350);
  --yellow: oklch(80% 0.14 90);
  --orange: oklch(70% 0.16 55);
  --red: oklch(63% 0.19 25);
  --green: oklch(66% 0.13 145);
  --cyan: oklch(72% 0.1 210);
  --blue-bg: color-mix(in srgb, var(--blue) 16%, transparent);
  --purple-bg: color-mix(in srgb, var(--purple) 16%, transparent);
  --pink-bg: color-mix(in srgb, var(--pink) 16%, transparent);
  --yellow-bg: color-mix(in srgb, var(--yellow) 18%, transparent);
  --orange-bg: color-mix(in srgb, var(--orange) 16%, transparent);
  --red-bg: color-mix(in srgb, var(--red) 14%, transparent);
  --green-bg: color-mix(in srgb, var(--green) 14%, transparent);
  --cyan-bg: color-mix(in srgb, var(--cyan) 16%, transparent);


  /* investigate entity-type colours (aliases onto the categorical palette,
     so they follow both themes automatically) */
  --t-domain: var(--blue);
  --t-sub: var(--cyan);
  --t-ip: var(--yellow);
  --t-cert: var(--purple);
  --t-org: var(--green);
  --t-person: var(--pink);
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
}

[data-theme="light"] {
  --bg: oklch(97% 0.004 250);
  --bg-deep: oklch(93.5% 0.005 250);
  --bg-sunken: oklch(95.5% 0.004 250);
  --panel-bg: oklch(100% 0 0);
  --panel-bg-2: oklch(100% 0 0);
  --drawer-bg: oklch(98% 0.004 250);
  --bg-toolbar: oklch(96% 0.004 250);
  --bg-winbar: oklch(95% 0.004 250);
  --bg-hover: oklch(94% 0.004 250);

  --text: oklch(20% 0.008 250);
  --text-2: oklch(30% 0.008 250);
  --text-3: oklch(40% 0.008 250);
  --text-4: oklch(48% 0.008 250);
  --text-5: oklch(56% 0.008 250);
  --text-6: oklch(60% 0.008 250);

  --line: oklch(87% 0.005 250);
  --line-soft: oklch(91% 0.004 250);
  --line-input: oklch(82% 0.006 250);

  --canvas-line: oklch(80% 0.006 250);

  --ok-text: oklch(38% 0.1 145);
  --ok-bg: oklch(92% 0.06 145);
  --ok-border: oklch(70% 0.1 145 / 0.45);
  --warn: oklch(55% 0.14 55);
  --warn-bg: oklch(55% 0.14 55 / 0.12);
  --danger: oklch(50% 0.19 25);
  --danger-bg: oklch(50% 0.19 25 / 0.1);
  --danger-border: oklch(50% 0.19 25 / 0.35);

  --shadow-win: 0 12px 28px oklch(0% 0 0 / 0.16);
  --shadow-drawer: -8px 0 20px oklch(0% 0 0 / 0.1);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.04), 0 4px 14px oklch(0% 0 0 / 0.06);
  --shadow-menu: 0 10px 28px oklch(0% 0 0 / 0.14);
}

/* --- brand logo -----------------------------------------------------------
   The inline logo art (templates/new_ui/logo/) paints every fill and gradient
   stop from these five tokens, so the mark and wordmark follow the accent
   picker and every theme preset instead of sitting brand-teal on a purple UI.
   Only the shading *relationship* is fixed: hi / base / mid / deep are the lit
   top face, the body, the outer wall and the shaded side of the stack. Mixed
   in oklab rather than srgb because the darker steps are a mix toward black,
   which srgb turns muddy and off-hue. --logo-ink is the "DOMAINS" half of the
   wordmark; it leans on --text-4 as well as the accent so it stays a legible
   muted counterpart in both modes, instead of being a fixed slate that
   disappears into a dark sidebar.

   Declared on .ld-logo rather than :root, unlike every other token here: a
   custom property is computed where it is declared, so a :root version would
   resolve var(--accent) at :root and ignore any closer override. --accent is
   only ever set on :root today, but a tenant-branded surface (see
   templates/report/report_v2.html) is exactly the case that would set one
   locally, and this way the logo follows it for free. */
.ld-logo {
  --logo-hi: color-mix(in oklab, var(--accent) 68%, white);
  --logo-base: var(--accent);
  --logo-mid: color-mix(in oklab, var(--accent) 90%, black);
  --logo-deep: color-mix(in oklab, var(--accent) 62%, black);
  --logo-ink: color-mix(in oklab, var(--accent) 35%, var(--text-4));
}

/* Light mode: the highlight carries less white (68% bleaches out against a
   white card) and the shaded face sinks a little less far. */
[data-theme="light"] .ld-logo {
  --logo-hi: color-mix(in oklab, var(--accent) 82%, white);
  --logo-deep: color-mix(in oklab, var(--accent) 68%, black);
}