/* this_file: src/editorial/fontlab-materialx.css */

/* MaterialX declares palette variables on body, so the renderer bridge must
   bind at that same boundary after its palette stylesheet. */
body[data-md-color-scheme][data-md-color-primary] {
  --md-default-bg-color: var(--color-base-100);
  --md-default-bg-color--light: color-mix(in oklab, var(--color-base-100) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in oklab, var(--color-base-100) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in oklab, var(--color-base-100) 12%, transparent);
  --md-default-fg-color: var(--color-base-content);
  --md-default-fg-color--light: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  --md-default-fg-color--lighter: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  --md-default-fg-color--lightest: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  --md-primary-fg-color: var(--color-base-100);
  --md-primary-bg-color: var(--color-base-content);
  --md-accent-fg-color: var(--color-secondary);
  --md-accent-bg-color: var(--color-secondary-content);
  --md-typeset-a-color: var(--color-secondary);
  --md-code-bg-color: var(--color-base-200);
  --md-code-fg-color: var(--color-base-content);
  --md-admonition-bg-color: var(--color-base-100);
  --md-admonition-fg-color: var(--color-base-content);
  --md-text-font: var(--fl-font-body);
  --md-code-font: var(--fl-font-mono);
}

/* Admonition colors and text-column spacing are shared in harmony-display.css. */

/* MaterialX owns its div-based authoring components. daisyUI owns the
   class-unique structural equivalents wherever they appear in the reading
   surface; .fl-ui is a layout helper, not an ownership switch. */
.md-typeset div.steps,
.md-typeset div.grid.cards,
.md-typeset div.grid > .card {
  --fl-component-owner: materialx;
}

.md-typeset ul.steps,
.md-typeset .card.card:not(div.grid > .card) {
  --fl-component-owner: daisyui;
}

/* MaterialX's unlayered component rules outrank daisyUI's cascade layers.
   Roll back only the colliding properties so ul.steps keeps daisyUI's layout. */
.md-typeset ul.steps {
  counter-reset: revert-layer;
  margin: revert-layer;
  padding-left: revert-layer;
  position: revert-layer;
}

.md-typeset ul.steps::before {
  content: revert-layer;
}

/* A div.grid.cards or div.grid > .card remains MaterialX-owned. A daisyUI
   component card outside that authored structure recovers only the properties
   shadowed by MaterialX. */
.md-typeset .card.card:not(div.grid > .card) {
  border: revert-layer;
  border-radius: revert-layer;
  display: revert-layer;
  margin: revert-layer;
  padding: revert-layer;
  transition: revert-layer;
}