/* @theme CNGX
 *
 * Custom compodocx theme that mirrors the cngx design language.
 *
 * Maps cngx foundation tokens (--cngx-color-*, --cngx-radius-*,
 * --cngx-shadow-*) onto compodocx's --color-cdx-* / --shadow-cdx-* /
 * --radius-cdx-* slots so the docs site feels like the rendered
 * cngx components, not a generic compodoc render.
 *
 * Source palette: projects/core/theming/system-tokens.css
 *  - surface, text, text-muted, border  (light-bg neutrals)
 *  - primary  (Ember oklch(0.66 0.19 50))
 *  - danger, success, warning, info     (semantic palette)
 *  - spacing: 4 / 8 / 16 / 24 / 32 px   (T-shirt scale)
 *  - radius:  4 / 8 / 12 / 999 px       (sm / md / lg / pill)
 *
 * The system-tokens file already declares :root, [data-color-scheme],
 * .dark and .light blocks. This theme intentionally re-declares the
 * --cngx-* values here too so the compodocx bundle ships standalone
 * (no implicit dependency on the cngx source being loaded ahead of
 * compodocx.css).
 *
 * Usage: configured via .compodocrc.json `theme` field.
 * Pairs with: --shikiTheme github-light:github-dark
 */

:root {
  /* cngx foundation values, re-declared so the theme is self-contained */
  --cngx-color-surface: oklch(1 0 0);
  --cngx-color-text: oklch(0.2 0.01 250);
  --cngx-color-text-muted: oklch(0.5 0.01 250);
  --cngx-color-border: oklch(0.88 0.005 250);
  --cngx-color-primary: oklch(0.66 0.19 50);
  --cngx-color-danger: oklch(0.6 0.18 25);
  --cngx-color-success: oklch(0.6 0.15 145);
  --cngx-color-warning: oklch(0.72 0.15 75);
  --cngx-color-info: oklch(0.65 0.12 240);

  /* ── Surface hierarchy ──────────────────────────────────── *
   * bg            = page surface (pure white, matches cngx-ex-bg)
   * bg-subtle     = soft hairline between bg and bg-alt
   * bg-alt        = sidebar, alt rows, tab strips (visibly tinted)
   * bg-elevated   = cards / popovers floating on bg-alt
   * bg-code       = inline-code chips
   * bg-code-block = fenced shiki block (dark on both modes)
   */
  --color-cdx-bg: var(--cngx-color-surface);
  --color-cdx-bg-subtle: oklch(0.97 0.004 250);
  --color-cdx-bg-alt: oklch(0.94 0.005 250);
  /* bg-elevated sits a hair below pure-white so feature cards on
   * the category landing pages read as cards at rest; the bundled
   * hover (box-shadow + translateY) then has a body to lift. */
  --color-cdx-bg-elevated: oklch(0.985 0.003 250);
  --color-cdx-bg-code: oklch(0.93 0.006 250);
  --color-cdx-bg-code-block: oklch(0.17 0.012 250);

  /* ── Text hierarchy ─────────────────────────────────────── */
  --color-cdx-text: var(--cngx-color-text);
  --color-cdx-text-secondary: oklch(0.4 0.01 250);
  --color-cdx-text-muted: var(--cngx-color-text-muted);
  --color-cdx-text-inverse: oklch(0.96 0.005 250);

  /* ── Primary accent — Ember ─────────────────────────────── */
  --color-cdx-primary: var(--cngx-color-primary);
  --color-cdx-primary-hover: oklch(0.58 0.19 50);
  --color-cdx-primary-subtle: oklch(0.97 0.04 50);

  /* ── Entity type accents ────────────────────────────────── *
   * Map cngx semantic colours to the 14 compodocx entity kinds.
   * Component leads with Ember; data utilities take success-green;
   * configuration / DI tokens stay in the neutral text family. */
  --color-cdx-entity-component: var(--cngx-color-primary);
  --color-cdx-entity-directive: oklch(0.6 0.16 280);
  --color-cdx-entity-service: oklch(0.62 0.16 35);
  --color-cdx-entity-pipe: oklch(0.6 0.18 330);
  --color-cdx-entity-module: var(--cngx-color-info);
  --color-cdx-entity-class: var(--cngx-color-success);
  --color-cdx-entity-interface: oklch(0.5 0.04 250);
  --color-cdx-entity-token: oklch(0.42 0.03 250);
  --color-cdx-entity-guard: var(--cngx-color-danger);
  --color-cdx-entity-interceptor: oklch(0.58 0.18 310);
  --color-cdx-entity-function: oklch(0.6 0.14 145);
  --color-cdx-entity-variable: oklch(0.5 0.03 250);
  --color-cdx-entity-typealias: oklch(0.6 0.16 270);
  --color-cdx-entity-enum: var(--cngx-color-warning);
  --color-cdx-entity-entity: var(--cngx-color-text);

  /* ── Badge base colors (auto-derive bg / border via color-mix) ── */
  --color-cdx-badge-standalone: oklch(0.55 0.13 175);
  --color-cdx-badge-token: oklch(0.55 0.16 280);
  --color-cdx-badge-beta: var(--cngx-color-warning);
  --color-cdx-badge-factory: var(--cngx-color-info);
  --color-cdx-badge-zoneless: oklch(0.55 0.15 295);
  --color-cdx-badge-breaking: var(--cngx-color-danger);
  --color-cdx-badge-signal: var(--cngx-color-primary);
  --color-cdx-badge-computed: oklch(0.58 0.15 290);
  --color-cdx-badge-effect: oklch(0.62 0.16 50);
  --color-cdx-badge-resource: oklch(0.58 0.14 200);
  --color-cdx-badge-model: oklch(0.55 0.14 250);
  --color-cdx-badge-after-render: oklch(0.6 0.15 30);
  --color-cdx-badge-after-next-render: oklch(0.6 0.16 20);
  --color-cdx-badge-after-every-render: oklch(0.6 0.17 12);
  --color-cdx-badge-after-render-effect: oklch(0.58 0.15 350);
  --color-cdx-badge-input: var(--cngx-color-success);
  --color-cdx-badge-output: oklch(0.58 0.16 350);
  --color-cdx-badge-view-child: oklch(0.55 0.13 175);
  --color-cdx-badge-content-child: oklch(0.55 0.13 95);
  --color-cdx-badge-inject: oklch(0.56 0.14 320);
  --color-cdx-badge-host: oklch(0.55 0.12 195);
  --color-cdx-badge-ai-generated: oklch(0.6 0.16 295);
  --color-cdx-badge-wcag-a: oklch(0.5 0.01 250);
  --color-cdx-badge-wcag-aa: var(--cngx-color-success);
  --color-cdx-badge-wcag-aaa: var(--cngx-color-info);

  /* ── Modifier base colors ─────────────────────────────────── */
  --color-cdx-mod-private: var(--cngx-color-danger);
  --color-cdx-mod-protected: oklch(0.5 0.12 60);
  --color-cdx-mod-readonly: oklch(0.55 0.12 230);
  --color-cdx-mod-static: oklch(0.55 0.13 280);
  --color-cdx-mod-async: oklch(0.5 0.12 180);

  /* ── Status colours ──────────────────────────────────────── */
  --color-cdx-status-pass: var(--cngx-color-success);
  --color-cdx-status-fail: var(--cngx-color-danger);
  --color-cdx-status-warning: var(--cngx-color-warning);

  /* ── Feedback ────────────────────────────────────────────── */
  --color-cdx-deprecated: var(--cngx-color-warning);
  --color-cdx-danger: var(--cngx-color-danger);

  /* ── Overlay ─────────────────────────────────────────────── */
  --color-cdx-overlay: oklch(0.2 0.01 250 / 0.4);

  /* ── Borders ─────────────────────────────────────────────── */
  --color-cdx-border: var(--cngx-color-border);
  --color-cdx-border-subtle: oklch(0.93 0.004 250);
  --color-cdx-border-strong: oklch(0.7 0.005 250);
  --color-cdx-border-focus: var(--cngx-color-primary);
  --color-cdx-focus-ring: var(--cngx-color-primary);

  /* ── Shadows (mirror --cngx-shadow-*) ────────────────────── */
  --shadow-cdx-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-cdx-md: 0 4px 16px oklch(0 0 0 / 0.12);
  --shadow-cdx-lg: 0 16px 40px oklch(0 0 0 / 0.18);

  /* ── Typography ──────────────────────────────────────────── *
   * cngx itself defers to system-ui; mirror that here so the
   * docs match the default cngx baseline (--cngx-font-size-md = 0.9375rem).
   */
  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-code: ui-monospace, 'SF Mono', Menlo, Consolas, 'Cascadia Code', monospace;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* [TW] */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* [TW] */

  /* ── Radii (mirror --cngx-radius-{sm|md|lg}) ─────────────── */
  --radius-cdx-sm: 4px;
  --radius-cdx-md: 8px;
  --radius-cdx-lg: 12px;
  --radius-sm: 4px; /* [TW] */
  --radius-md: 8px; /* [TW] */
  --radius-lg: 12px; /* [TW] */
  --radius-2xl: 12px; /* [TW] */

  /* ── Spacing ─────────────────────────────────────────────── *
   * The cngx scale (xs=4 sm=8 md=16 lg=24 xl=32) is wider than the
   * compodocx default (xs=4 sm=8 md=12 lg=16 xl=20 2xl=24). Keep
   * the cdx scale intact for docs-chrome density but anchor xs/sm
   * to the cngx values.
   */
  --spacing-cdx-xs: 4px;
  --spacing-cdx-sm: 8px;
  --spacing-cdx-md: 12px;
  --spacing-cdx-lg: 16px;
  --spacing-cdx-xl: 20px;
  --spacing-cdx-2xl: 24px;

  /* ── Code blocks ─────────────────────────────────────────── */
  --color-cdx-snippet-bg: oklch(0.96 0.005 250);
  --color-cdx-snippet-border: transparent;
  --color-cdx-snippet-radius: var(--radius-cdx-md);
  --color-cdx-code-inline: oklch(0.4 0.01 250);
  --color-cdx-code-dark-surface: oklch(0.18 0.01 250);
  --color-cdx-scrollbar: oklch(0.5 0.01 250 / 0.4);
  --color-cdx-line-number: oklch(0.5 0.01 250 / 0.5);
  --color-cdx-line-hover: oklch(0.2 0.01 250 / 0.06);
  --color-cdx-line-highlight: oklch(0.82 0.16 50 / 0.25);
  --color-cdx-line-highlight-flash: oklch(0.82 0.16 50 / 0.4);
  --color-cdx-copy-success: var(--cngx-color-success);
  --color-cdx-lang-chip: oklch(0.5 0.01 250);
  --color-cdx-lang-chip-bg: oklch(0.5 0.01 250 / 0.1);

  /* ── Graphs (dependency, DOM tree) ───────────────────────── */
  --color-cdx-graph-bg: oklch(0.97 0.005 250);
  --color-cdx-graph-border: transparent;
  --color-cdx-graph-border-width: 0;
  --color-cdx-graph-radius: var(--radius-cdx-md);

  /* ── Transitions (mirror --cngx-duration-*) ──────────────── */
  --cdx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cdx-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Region overrides ────────────────────────────────────── *
 * Sidebar shares the page surface (no visible separation, matches
 * the cngx demo app shell rhythm). Border stays as the lightest
 * hairline so the column edge still reads. */
.cdx-sidebar {
  background: var(--color-cdx-bg);
  border-right-color: var(--color-cdx-border-subtle);
}

/* Related-entity pills read as light chips on the page surface.
 * Default state matches the page bg + the sidebar override above.
 * Hover lifts into bg-alt so the interactive feedback is still
 * legible against the now-merged page+sidebar surface. */
.cdx-related-pill {
  background: var(--color-cdx-bg);
}
.cdx-related-pill:hover,
a.cdx-related-pill:focus-visible {
  background: var(--color-cdx-bg-alt);
}

/* Inline <code> in prose. The default bundle ships `.cdx-readme
 * :not(pre)>code { background: bg-elevated; border: 1px solid
 * border; }` which on a white page reads as a button chip rather
 * than inline code. Drop the border, lean on bg-alt for the
 * subtle pill effect. Matches the bundle's selector specificity
 * (class + pseudo + type) so source-order wins. */
.cdx-readme :not(pre) > code {
  border: none;
  background: var(--color-cdx-bg-alt);
  color: var(--color-cdx-text);
  padding: 1px 6px;
  border-radius: 4px;
}
:not(pre) > code {
  border: none;
  background: var(--color-cdx-bg-alt);
  color: var(--color-cdx-text);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Inline <code> inside headings has no business being a chip - the
 * surrounding heading already owns the visual weight. Strip the
 * chip background and padding so the code reads as part of the
 * heading typography (monospace + inherit color). Otherwise a page
 * of `### @cngx/utils - Level 0` style H3s renders as a vertical
 * stack of chunky chip-blobs that fight the heading hierarchy. */
.cdx-readme :is(h1, h2, h3, h4, h5, h6) :not(pre) > code,
.cdx-prose :is(h1, h2, h3, h4, h5, h6) :not(pre) > code,
:is(h1, h2, h3, h4, h5, h6) :not(pre) > code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.92em;
}

/* Markdown / lookup tables. The default bundle ships basic borders +
 * uppercased headers. Add a soft container, a tinted header strip, and
 * zebra striping so dense lookup tables stay scannable without looking
 * like a spreadsheet. Covers three surfaces that share the same
 * markdown-table markup:
 *   .cdx-readme    - core-concepts / additional pages
 *   .cdx-prose     - getting-started pages (contributing, project README)
 *   .cdx-tab-panel - the per-symbol Libraries tabs (overview, host
 *                    bindings/listeners, examples) */
.cdx-readme table,
.cdx-prose table,
.cdx-tab-panel table {
  border-radius: var(--radius-cdx-md, 8px);
  overflow: hidden;
  border: 1px solid var(--color-cdx-border-subtle);
  margin-block: 1.25rem;
}
.cdx-readme table thead th,
.cdx-prose table thead th,
.cdx-tab-panel table thead th {
  background: var(--color-cdx-bg-alt);
  border-bottom: 1px solid var(--color-cdx-border);
  cursor: default;
  padding: 10px 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.cdx-readme table tbody td,
.cdx-prose table tbody td,
.cdx-tab-panel table tbody td {
  border-bottom: 1px solid var(--color-cdx-border-subtle);
  padding: 10px 16px;
  vertical-align: top;
  line-height: 1.5;
}
.cdx-readme table tbody tr:nth-child(even) td,
.cdx-prose table tbody tr:nth-child(even) td,
.cdx-tab-panel table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-cdx-bg-alt) 40%, transparent);
}
.cdx-readme table tbody tr:last-child td,
.cdx-prose table tbody tr:last-child td,
.cdx-tab-panel table tbody tr:last-child td {
  border-bottom: none;
}
.cdx-readme table tbody tr:hover td,
.cdx-prose table tbody tr:hover td,
.cdx-tab-panel table tbody tr:hover td {
  background: var(--color-cdx-bg-alt);
}
.cdx-readme table th:first-child,
.cdx-readme table td:first-child,
.cdx-prose table th:first-child,
.cdx-prose table td:first-child,
.cdx-tab-panel table th:first-child,
.cdx-tab-panel table td:first-child {
  padding-left: 18px;
}
.cdx-readme table th:last-child,
.cdx-readme table td:last-child,
.cdx-prose table th:last-child,
.cdx-prose table td:last-child,
.cdx-tab-panel table th:last-child,
.cdx-tab-panel table td:last-child {
  padding-right: 18px;
}

/* Page-lead TL;DR. Authored as <aside class="cc-tldr"> at the top
 * of every core-concept page. NO box - just a small eyebrow label
 * over a slightly larger lead paragraph. Keeps the page header
 * area light; the chrome stays on the content blocks below. */
.cdx-readme .cc-tldr {
  margin: 0 0 2.25rem 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-cdx-text);
}
.cdx-readme .cc-tldr::before {
  content: 'TL;DR';
  display: block;
  margin: 0 0 6px 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cdx-primary);
}
.cdx-readme .cc-tldr > :first-child {
  margin-top: 0;
}
.cdx-readme .cc-tldr > :last-child {
  margin-bottom: 0;
}
.cdx-readme .cc-tldr p {
  margin: 0;
}
.cdx-readme .cc-tldr p + p {
  margin-top: 8px;
}

/* In-prose callouts. Authored as <aside class="cc-note"> blocks in
 * markdown so the inline-code rule does NOT clobber the start of
 * the note. Four kinds map to the cngx semantic palette: note (info
 * blue), tip (success green), warning (amber), danger (red). The
 * leading <strong> renders the kind label in the accent colour. */
.cdx-readme .cc-note,
.cdx-readme .cc-tip,
.cdx-readme .cc-warning,
.cdx-readme .cc-danger {
  margin: 1.25rem 0;
  padding: 12px 16px;
  border-radius: var(--radius-cdx-md, 8px);
  border-left: 3px solid var(--cngx-color-info);
  background: color-mix(in srgb, var(--cngx-color-info) 7%, var(--color-cdx-bg));
  font-size: 0.9375rem;
}
.cdx-readme .cc-note > :first-child,
.cdx-readme .cc-tip > :first-child,
.cdx-readme .cc-warning > :first-child,
.cdx-readme .cc-danger > :first-child {
  margin-top: 0;
}
.cdx-readme .cc-note > :last-child,
.cdx-readme .cc-tip > :last-child,
.cdx-readme .cc-warning > :last-child,
.cdx-readme .cc-danger > :last-child {
  margin-bottom: 0;
}
.cdx-readme .cc-note > p:first-child > strong:first-child {
  color: var(--cngx-color-info);
}

.cdx-readme .cc-tip {
  border-left-color: var(--cngx-color-success);
  background: color-mix(in srgb, var(--cngx-color-success) 7%, var(--color-cdx-bg));
}
.cdx-readme .cc-tip > p:first-child > strong:first-child {
  color: var(--cngx-color-success);
}

.cdx-readme .cc-warning {
  border-left-color: var(--cngx-color-warning);
  background: color-mix(in srgb, var(--cngx-color-warning) 9%, var(--color-cdx-bg));
}
.cdx-readme .cc-warning > p:first-child > strong:first-child {
  color: color-mix(in srgb, var(--cngx-color-warning) 70%, var(--color-cdx-text));
}

.cdx-readme .cc-danger {
  border-left-color: var(--cngx-color-danger);
  background: color-mix(in srgb, var(--cngx-color-danger) 7%, var(--color-cdx-bg));
}
.cdx-readme .cc-danger > p:first-child > strong:first-child {
  color: var(--cngx-color-danger);
}

/* Vertical rhythm in prose - give paragraphs, code blocks, and
 * section headings room to breathe so the page feels less dense.
 * H2 owns a much larger top margin so the section break reads
 * purely as whitespace; no horizontal-rule paint needed.
 *
 * Covers BOTH `.cdx-readme` (core-concepts / additional pages) and
 * `.cdx-prose` (index README rendering). The bundle uses different
 * wrappers for the two surfaces; the rhythm must match. */
.cdx-readme p,
.cdx-prose p {
  margin-block: 0 1rem;
  line-height: 1.65;
}
/* Component README/principles tab only. The entity hero above already
 * owns the page title, and the tab strip sits directly above the
 * content, so a full-size markdown <h1> reads as a second page title
 * crammed against the tabs. Scale it down to a section-lead weight and
 * give the panel air below the tab strip. Scoped to `.cdx-tab-panel`
 * so core-concepts / additional pages (where <h1> is the real page
 * title) keep the large size. */
.cdx-tab-panel .cdx-readme > h1:first-child {
  margin-top: 0;
}
.cdx-tab-panel .cdx-readme h1 {
  font-size: 1.625rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.cdx-tab-panel#readme {
  padding-top: 1.75rem;
}
.cdx-readme h2,
.cdx-prose h2 {
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}
/* First section heading in the principles tab should not carry the
 * full 3.5rem top gap meant for mid-page section breaks - the lead
 * paragraph above it already provides separation. */
.cdx-tab-panel .cdx-readme h1 + p + h2,
.cdx-tab-panel .cdx-readme h1 ~ h2:nth-of-type(1) {
  margin-top: 2.5rem;
}
.cdx-readme h3,
.cdx-prose h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.625rem;
}
.cdx-readme h4,
.cdx-prose h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.cdx-readme pre,
.cdx-prose pre {
  margin-block: 1rem 1.25rem;
}
.cdx-readme ul,
.cdx-readme ol,
.cdx-prose ul,
.cdx-prose ol {
  margin-block: 0.5rem 1.25rem;
}
.cdx-readme li,
.cdx-prose li {
  margin-block: 0.25rem;
  line-height: 1.6;
}
.cdx-readme blockquote,
.cdx-prose blockquote {
  margin-block: 1.25rem;
  padding-block: 0.5rem;
}
/* `---` markdown breaks render as <hr>. Strip the painted line and
 * keep only the vertical gap so a section break reads as breathing
 * room, not as a hard divider. */
.cdx-readme hr,
.cdx-prose hr {
  margin-block: 1.25rem;
  border: none;
  height: 0;
}
.cdx-example-container {
  border: 0;
}
.cdx-example-container body {
  padding: 0;
}
#cngx-ex-color-scheme-toggle {
  display: none;
}
.cdx-entity-hero {
  background: var(--color-cdx-bg);
}
code.cdx-shiki-inline {
  padding: 1px 6px !important;
}
.dark {
  /* Mirror cngx dark mode lift: +0.06-0.08 L on semantics, slight
   * chroma reduction. Surface stays in the same hue family. */
  --cngx-color-surface: oklch(0.2 0.01 250);
  --cngx-color-text: oklch(0.95 0.01 250);
  --cngx-color-text-muted: oklch(0.7 0.01 250);
  --cngx-color-border: oklch(0.32 0.005 250);
  --cngx-color-primary: oklch(0.72 0.18 50);
  --cngx-color-danger: oklch(0.68 0.17 25);
  --cngx-color-success: oklch(0.68 0.14 145);
  --cngx-color-warning: oklch(0.78 0.14 75);
  --cngx-color-info: oklch(0.72 0.11 240);

  /* ── Surface hierarchy (dark mirror) ────────────────────── *
   * Same five-step ladder as light mode, lifted across L:
   *   bg < bg-subtle < bg-alt < bg-elevated
   *   bg-code-block sits darker than bg for shiki contrast.
   */
  --color-cdx-bg: var(--cngx-color-surface);
  --color-cdx-bg-subtle: oklch(0.22 0.01 250);
  --color-cdx-bg-alt: oklch(0.26 0.01 250);
  --color-cdx-bg-elevated: oklch(0.29 0.012 250);
  --color-cdx-bg-code: oklch(0.28 0.01 250);
  --color-cdx-bg-code-block: oklch(0.12 0.01 250);

  /* ── Text hierarchy ─────────────────────────────────────── */
  --color-cdx-text: var(--cngx-color-text);
  --color-cdx-text-secondary: oklch(0.8 0.01 250);
  --color-cdx-text-muted: var(--cngx-color-text-muted);
  --color-cdx-text-inverse: oklch(0.2 0.01 250);

  /* ── Primary accent ─────────────────────────────────────── */
  --color-cdx-primary: var(--cngx-color-primary);
  --color-cdx-primary-hover: oklch(0.78 0.16 50);
  --color-cdx-primary-subtle: oklch(0.32 0.1 50);

  /* ── Entity type accents (lifted + softened chroma) ─────── */
  --color-cdx-entity-component: var(--cngx-color-primary);
  --color-cdx-entity-directive: oklch(0.7 0.14 280);
  --color-cdx-entity-service: oklch(0.7 0.14 35);
  --color-cdx-entity-pipe: oklch(0.7 0.16 330);
  --color-cdx-entity-module: var(--cngx-color-info);
  --color-cdx-entity-class: var(--cngx-color-success);
  --color-cdx-entity-interface: oklch(0.7 0.03 250);
  --color-cdx-entity-token: oklch(0.6 0.02 250);
  --color-cdx-entity-guard: var(--cngx-color-danger);
  --color-cdx-entity-interceptor: oklch(0.68 0.15 310);
  --color-cdx-entity-function: oklch(0.7 0.13 145);
  --color-cdx-entity-variable: oklch(0.7 0.02 250);
  --color-cdx-entity-typealias: oklch(0.7 0.14 270);
  --color-cdx-entity-enum: var(--cngx-color-warning);
  --color-cdx-entity-entity: var(--cngx-color-text);

  /* ── Badge base colors (parallel re-derive) ─────────────── */
  --color-cdx-badge-standalone: oklch(0.65 0.11 175);
  --color-cdx-badge-token: oklch(0.65 0.14 280);
  --color-cdx-badge-beta: var(--cngx-color-warning);
  --color-cdx-badge-factory: var(--cngx-color-info);
  --color-cdx-badge-zoneless: oklch(0.65 0.14 295);
  --color-cdx-badge-breaking: var(--cngx-color-danger);
  --color-cdx-badge-signal: var(--cngx-color-primary);
  --color-cdx-badge-computed: oklch(0.68 0.14 290);
  --color-cdx-badge-effect: oklch(0.72 0.14 50);
  --color-cdx-badge-resource: oklch(0.68 0.13 200);
  --color-cdx-badge-model: oklch(0.65 0.13 250);
  --color-cdx-badge-after-render: oklch(0.7 0.14 30);
  --color-cdx-badge-after-next-render: oklch(0.7 0.15 20);
  --color-cdx-badge-after-every-render: oklch(0.7 0.16 12);
  --color-cdx-badge-after-render-effect: oklch(0.68 0.14 350);
  --color-cdx-badge-input: var(--cngx-color-success);
  --color-cdx-badge-output: oklch(0.68 0.15 350);
  --color-cdx-badge-view-child: oklch(0.65 0.11 175);
  --color-cdx-badge-content-child: oklch(0.65 0.12 95);
  --color-cdx-badge-inject: oklch(0.66 0.13 320);
  --color-cdx-badge-host: oklch(0.65 0.11 195);
  --color-cdx-badge-ai-generated: oklch(0.7 0.15 295);
  --color-cdx-badge-wcag-a: oklch(0.7 0.01 250);
  --color-cdx-badge-wcag-aa: var(--cngx-color-success);
  --color-cdx-badge-wcag-aaa: var(--cngx-color-info);

  /* ── Modifier base colors ────────────────────────────────── */
  --color-cdx-mod-private: var(--cngx-color-danger);
  --color-cdx-mod-protected: oklch(0.6 0.11 60);
  --color-cdx-mod-readonly: oklch(0.65 0.11 230);
  --color-cdx-mod-static: oklch(0.65 0.12 280);
  --color-cdx-mod-async: oklch(0.6 0.11 180);

  /* ── Status, feedback, overlay ──────────────────────────── */
  --color-cdx-status-pass: var(--cngx-color-success);
  --color-cdx-status-fail: var(--cngx-color-danger);
  --color-cdx-status-warning: var(--cngx-color-warning);
  --color-cdx-deprecated: var(--cngx-color-warning);
  --color-cdx-danger: var(--cngx-color-danger);
  --color-cdx-overlay: oklch(0.1 0.01 250 / 0.6);

  /* ── Borders ─────────────────────────────────────────────── */
  --color-cdx-border: var(--cngx-color-border);
  --color-cdx-border-subtle: oklch(0.28 0.005 250);
  --color-cdx-border-strong: oklch(0.45 0.005 250);
  --color-cdx-border-focus: var(--cngx-color-primary);
  --color-cdx-focus-ring: var(--cngx-color-primary);

  /* ── Shadows (lift transparency in dark) ─────────────────── */
  --shadow-cdx-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-cdx-md: 0 4px 16px oklch(0 0 0 / 0.5);
  --shadow-cdx-lg: 0 16px 40px oklch(0 0 0 / 0.6);

  /* ── Code blocks ─────────────────────────────────────────── */
  --color-cdx-snippet-bg: oklch(0.26 0.01 250);
  --color-cdx-snippet-border: transparent;
  --color-cdx-code-inline: oklch(0.7 0.01 250);
  --color-cdx-code-dark-surface: oklch(0.14 0.01 250);
  --color-cdx-scrollbar: oklch(0.7 0.01 250 / 0.4);
  --color-cdx-line-number: oklch(0.6 0.01 250 / 0.6);
  --color-cdx-line-hover: oklch(0.95 0.01 250 / 0.06);
  --color-cdx-line-highlight: oklch(0.82 0.16 50 / 0.18);
  --color-cdx-line-highlight-flash: oklch(0.82 0.16 50 / 0.3);
  --color-cdx-copy-success: var(--cngx-color-success);
  --color-cdx-lang-chip: oklch(0.7 0.01 250);
  --color-cdx-lang-chip-bg: oklch(0.7 0.01 250 / 0.1);

  /* ── Graphs ──────────────────────────────────────────────── */
  --color-cdx-graph-bg: oklch(0.24 0.01 250);
  .cdx-entity-hero {
    background: var(--color-cdx-bg);
  }
}

/* Markdown headings inside a JSDoc comment (e.g. a `### UX / a11y`
   section) get the section-heading look, with a margin-top so they read
   as a heading rather than running into the prose above. Excludes the
   real `.cdx-section-heading` rendered by the template. */
.cdx-content-section h3:not(.cdx-section-heading) {
  font-family: var(--font-sans);
  color: var(--color-cdx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  font-weight: 600;
  margin-top: var(--spacing-cdx-lg);
  margin-bottom: 0.75rem;
  scroll-margin-top: 48px;
}
.cdx-content-section h3:not(.cdx-section-heading) > a.cdx-member-permalink {
  opacity: 0;
}
.cdx-content-section h3:not(.cdx-section-heading):hover > a.cdx-member-permalink {
  opacity: 1;
}