:root {
  /* QueryKey Cases canonical typography + accents (see README/docs/reference/04-development/guides/styling.md). */
  --ci-font-sans: 'QueryKeySans', 'Inter', 'Segoe UI', sans-serif;
  --ci-font-serif: 'QueryKeySans', 'Fraunces', 'Georgia', serif;
  --qk-premium-accent: #f78a1d;
  --qk-premium-accent-blue: #4d82ff;
  --qk-accent-orange: var(--qk-premium-accent);
  --qk-accent-blue: var(--qk-premium-accent-blue);
  --std-accent-orange: var(--qk-accent-orange);
  --std-accent-blue: var(--qk-accent-blue);
  --qk-standard-band-dark: #0f1d38;
  --qk-standard-band-mid: #162c50;
  --qk-standard-light-canvas: #f3f5f9;
  --qk-standard-light-band: #dce6f4;
  --qk-standard-light-surface: #f8fbff;
  --qk-standard-light-border: #d7dee9;
  --qk-premium-bg-base: #0b1730;
  --qk-premium-bg-elev: #102347;
  --qk-premium-surface: rgb(19 37 76 / 90%);
  --qk-premium-surface-alt: rgb(14 31 64 / 94%);
  --qk-premium-surface-border: rgb(103 132 214 / 36%);
  --qk-premium-text: rgb(236 243 255 / 96%);
  --qk-premium-text-soft: rgb(188 205 235 / 92%);
  --qk-premium-shadow: 0 18px 38px rgb(3 11 28 / 34%);
  --ci-radius-sm: 0.75rem;
  --ci-radius-md: 1rem;
  --ci-radius-lg: 1.4rem;
  --ci-radius-xl: 1.8rem;
  --ci-radius-pill: 999px;
  --ci-shadow-surface: 0 18px 42px rgba(15, 23, 42, 0.08);
  --ci-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
  --ci-shadow-strong: 0 24px 60px rgba(15, 23, 42, 0.18);
  --ci-page-bg: var(--qk-standard-light-canvas);
  --ci-page-bg-alt: var(--qk-standard-light-band);
  --ci-panel-bg: rgba(248, 251, 255, 0.92);
  --ci-panel-bg-strong: var(--qk-standard-light-surface);
  --ci-panel-muted: rgba(220, 230, 244, 0.88);
  --ci-sidebar-bg: var(--qk-standard-band-dark);
  --ci-input-bg: rgba(248, 251, 255, 0.92);
  --ci-text-main: #0f172a;
  --ci-text-muted: #6b7a90;
  --ci-text-faint: #94a3b8;
  --ci-border: color-mix(in srgb, var(--qk-standard-light-border) 70%, transparent);
  --ci-border-soft: color-mix(in srgb, var(--qk-standard-light-border) 52%, transparent);
  --ci-border-strong: rgba(15, 23, 42, 0.18);
  --ci-accent: var(--std-accent-blue);
  --ci-accent-strong: color-mix(in srgb, var(--ci-accent) 82%, #0f172a);
  --ci-accent-soft: color-mix(in srgb, var(--ci-accent) 18%, transparent);
  --ci-accent-soft-2: color-mix(in srgb, var(--ci-accent) 8%, transparent);
  --ci-accent-shadow: color-mix(in srgb, var(--ci-accent) 35%, transparent);
  --ci-highlight: var(--std-accent-orange);
  --ci-highlight-strong: color-mix(in srgb, var(--ci-highlight) 82%, #0f172a);
  --ci-highlight-soft: color-mix(in srgb, var(--ci-highlight) 14%, transparent);
  --ci-highlight-soft-2: color-mix(in srgb, var(--ci-highlight) 22%, transparent);
  --ci-highlight-shadow: color-mix(in srgb, var(--ci-highlight) 32%, transparent);
  --ci-highlight-text: color-mix(in srgb, var(--ci-highlight) 72%, #0f172a);
  --ci-success: #16a34a;
  --ci-danger: #dc2626;
  --ci-surface-glass: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ci-panel-bg) 94%, transparent),
    color-mix(in srgb, var(--ci-page-bg-alt) 92%, transparent)
  );
  --ci-surface-glass-strong: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ci-panel-bg-strong) 96%, transparent),
    color-mix(in srgb, var(--ci-panel-bg) 92%, transparent)
  );
  --ci-surface-glass-soft: color-mix(in srgb, var(--ci-panel-muted) 92%, transparent);
  --ci-surface-interactive: color-mix(in srgb, var(--ci-text-main) 4%, transparent);
  --ci-surface-interactive-strong: color-mix(in srgb, var(--ci-panel-bg-strong) 88%, transparent);
  --ci-surface-interactive-border: color-mix(in srgb, var(--ci-text-main) 10%, transparent);
  --ci-pill-bg: color-mix(in srgb, var(--ci-text-main) 5%, transparent);
  --ci-pill-border: color-mix(in srgb, var(--ci-text-main) 10%, transparent);
  --ci-pill-text: var(--ci-accent-strong);
  --ci-badge-bg: color-mix(in srgb, var(--ci-highlight) 14%, transparent);
  --ci-badge-text: var(--ci-highlight-strong);
  --ci-cta-gradient: linear-gradient(135deg, var(--ci-highlight), #ff9f43);
  --ci-cta-shadow: 0 18px 36px color-mix(in srgb, var(--ci-highlight) 24%, transparent);
  --ci-brand-gradient: linear-gradient(135deg, var(--ci-highlight), #ff9f43);
  --ci-grid-overlay:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  --ci-page-gradient:
    radial-gradient(1200px 600px at 10% -10%, rgba(77, 130, 255, 0.14), transparent),
    radial-gradient(1000px 520px at 110% 10%, rgba(247, 138, 29, 0.12), transparent),
    linear-gradient(180deg, var(--ci-page-bg), var(--ci-page-bg-alt));
}

body.is-dark,
body.dark-mode,
.kb-app.is-dark,
.forum-app.is-dark,
.admin-app.is-dark,
[data-theme='dark'],
.dark-mode,
[data-theme-resolved='dark'].qk-chat-panel,
[data-theme-resolved='dark'].qk-chat-button,
[data-theme-resolved='dark'] {
  --ci-page-bg: var(--qk-premium-bg-base);
  --ci-page-bg-alt: var(--qk-premium-bg-elev);
  --ci-panel-bg: var(--qk-premium-surface);
  --ci-panel-bg-strong: var(--qk-premium-surface-alt);
  --ci-panel-muted: color-mix(in srgb, var(--qk-premium-surface-alt) 72%, transparent);
  --ci-sidebar-bg: var(--qk-standard-band-dark);
  --ci-input-bg: color-mix(in srgb, var(--qk-premium-bg-elev) 68%, transparent);
  --ci-text-main: var(--qk-premium-text);
  --ci-text-muted: var(--qk-premium-text-soft);
  --ci-text-faint: color-mix(in srgb, var(--qk-premium-text-soft) 70%, transparent);
  --ci-border: var(--qk-premium-surface-border);
  --ci-border-soft: color-mix(in srgb, var(--qk-premium-surface-border) 58%, transparent);
  --ci-border-strong: color-mix(in srgb, var(--ci-highlight) 28%, transparent);
  --ci-shadow-surface: 0 24px 56px rgba(0, 0, 0, 0.38);
  --ci-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.28);
  --ci-shadow-strong: 0 28px 72px rgba(0, 0, 0, 0.44);
  --ci-surface-glass: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ci-panel-bg) 94%, transparent),
    color-mix(in srgb, var(--ci-page-bg-alt) 88%, transparent)
  );
  --ci-surface-glass-strong: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ci-panel-bg-strong) 96%, transparent),
    color-mix(in srgb, var(--ci-panel-bg) 92%, transparent)
  );
  --ci-surface-glass-soft: color-mix(in srgb, var(--ci-panel-muted) 92%, transparent);
  --ci-surface-interactive: color-mix(in srgb, var(--ci-accent) 12%, transparent);
  --ci-surface-interactive-strong: color-mix(in srgb, var(--ci-panel-bg-strong) 90%, transparent);
  --ci-surface-interactive-border: color-mix(in srgb, var(--ci-accent) 18%, transparent);
  --ci-pill-bg: color-mix(in srgb, var(--ci-accent) 14%, transparent);
  --ci-pill-border: color-mix(in srgb, var(--ci-accent) 20%, transparent);
  --ci-pill-text: var(--ci-accent-strong);
  --ci-badge-bg: color-mix(in srgb, var(--ci-highlight) 20%, transparent);
  --ci-badge-text: var(--ci-highlight-strong);
  --ci-cta-gradient: linear-gradient(135deg, var(--ci-highlight), var(--ci-highlight-strong));
  --ci-cta-shadow: 0 18px 38px color-mix(in srgb, var(--ci-highlight) 24%, transparent);
  --ci-brand-gradient: linear-gradient(135deg, var(--ci-highlight), var(--ci-highlight-strong));
  --ci-grid-overlay:
    linear-gradient(rgba(247, 138, 29, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 130, 255, 0.05) 1px, transparent 1px);
  --ci-page-gradient:
    radial-gradient(1200px 600px at 10% -10%, rgba(77, 130, 255, 0.16), transparent),
    radial-gradient(1000px 520px at 110% 10%, rgba(247, 138, 29, 0.14), transparent),
    var(--ci-page-bg);
}