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

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

    /* ── Typography ── */
    --empty-state-heading-size-default:   var(--a-ui-lg);
    --empty-state-heading-weight-default: var(--a-weight-medium);
    --empty-state-desc-size-default:      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-py-default)) var(--empty-state-px, var(--empty-state-px-default));
    gap: var(--empty-state-gap, var(--empty-state-gap-default));
  }

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

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

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

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

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

  :scope[variant="warning"] {
    --empty-state-icon-fg-default:    var(--a-warning-strong);
    --empty-state-heading-fg-default: var(--a-warning-text);
    --empty-state-desc-fg-default:    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;
    font-weight: var(--a-weight-normal);
    color: inherit;
    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;
  }
}
