@scope (empty-state-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --empty-state-px:             var(--a-space-6);
    --empty-state-py:             var(--a-space-8);
    --empty-state-gap:            var(--a-space-2);
    --empty-state-action-mt:      var(--a-space-2);
    --empty-state-icon-size:      3rem;

    /* ── Colors ── */
    --empty-state-icon-fg:        var(--a-fg-muted);
    --empty-state-heading-fg:     var(--a-fg);
    --empty-state-desc-fg:        var(--a-fg-muted);

    /* ── Typography ──
       Heading uses the dedicated heading ramp (16px), NOT --a-ui-lg (15px,
       the top of the control-label ramp) — at 15px the heading was only 1.07×
       the 14px description, a hierarchy too weak to read as a title. 17px
       lifts the ratio to ~1.21 (heading-medium weight adds further contrast). */
    --empty-state-heading-size:   var(--a-heading-md);
    --empty-state-heading-weight: var(--a-weight-medium);
    --empty-state-desc-size:      var(--a-ui-size);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--empty-state-py) var(--empty-state-px);
    gap: var(--empty-state-gap);
  }

  /* ── Icon ── */
  [slot="icon"] {
    font-size: var(--empty-state-icon-size);
    color: var(--empty-state-icon-fg);
  }

  /* ── Heading ── */
  [slot="heading"] {
    font-size: var(--empty-state-heading-size);
    font-weight: var(--empty-state-heading-weight);
    color: var(--empty-state-heading-fg);
    line-height: 1.3;
  }

  /* ── Description ── */
  [slot="description"] {
    font-size: var(--empty-state-desc-size);
    color: var(--empty-state-desc-fg);
    line-height: 1.5;
    max-width: 36ch;
  }

  /* ── Action slot ── */
  [slot="action"] {
    margin-top: var(--empty-state-action-mt);
  }

  /* ── Semantic color variants ──
     Color the icon + text only; no background/border tint. */
  :scope[variant="danger"] {
    --empty-state-icon-fg:    var(--a-danger-strong);
    --empty-state-heading-fg: var(--a-danger-text);
    --empty-state-desc-fg:    var(--a-danger-text);
  }

  :scope[variant="warning"] {
    --empty-state-icon-fg:    var(--a-warning-strong);
    --empty-state-heading-fg: var(--a-warning-text);
    --empty-state-desc-fg:    var(--a-warning-text);
  }

  /* ── §223 (v0.5.9): [minimal] — single-line muted layout ──
     Drops centered-column chrome (no canvas-style padding, no flex-column
     stack). Renders as `[icon] heading [description]` inline in muted-fg.
     Useful for inline placeholder rows / cells where the full placeholder
     would be too loud. */
  :scope[minimal] {
    flex-direction: row;
    align-items: baseline;
    text-align: start;
    padding: var(--a-space-2) var(--a-space-3);
    gap: var(--a-space-2);
    color: var(--a-fg-muted);
    font-size: var(--a-ui-size);
  }
  :scope[minimal] [slot="icon"] {
    font-size: 1em;
    color: inherit;
    flex-shrink: 0;
  }
  :scope[minimal] [slot="heading"] {
    font-size: inherit;
    /* Keep the heading bolder + non-muted so it stays distinct from the
       muted inline description on the same baseline (otherwise '[icon]
       heading description' reads as one run-on phrase). */
    font-weight: var(--empty-state-heading-weight);
    color: var(--empty-state-heading-fg);
    line-height: inherit;
  }
  :scope[minimal] [slot="description"] {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    max-width: none;
  }
  :scope[minimal] [slot="action"] {
    margin-top: 0;
    margin-inline-start: auto;
  }
}
