/* Shared foundations for the Editor UI selectors and the standalone showcase. */

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) {
  color: var(--ui-color-text);
  background-color: var(--ui-color-canvas);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
  text-rendering: optimizeLegibility;
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog),
:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *,
:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *::before,
:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *::after {
  box-sizing: border-box;
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(button, input, select, textarea) {
  font: inherit;
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h1, h2, h3, h4, h5, h6, .ui-heading, .theme-heading) {
  margin-block: 0;
  color: var(--ui-color-title);
  font-family: var(--ui-font-heading);
  font-weight: var(--theme-font-weight-semibold);
  overflow-wrap: anywhere;
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h1, .ui-heading--1, .theme-heading--1) {
  font-size: var(--theme-font-size-5xl);
  line-height: var(--theme-line-height-5xl);
  letter-spacing: var(--theme-letter-spacing-5xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h2, .ui-heading--2, .theme-heading--2) {
  font-size: var(--theme-font-size-4xl);
  line-height: var(--theme-line-height-4xl);
  letter-spacing: var(--theme-letter-spacing-4xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h3, .ui-heading--3, .theme-heading--3) {
  font-size: var(--theme-font-size-3xl);
  line-height: var(--theme-line-height-3xl);
  letter-spacing: var(--theme-letter-spacing-3xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h4, .ui-heading--4, .theme-heading--4) {
  font-size: var(--theme-font-size-2xl);
  line-height: var(--theme-line-height-2xl);
  letter-spacing: var(--theme-letter-spacing-2xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h5, .ui-heading--5, .theme-heading--5) {
  font-size: var(--theme-font-size-xl);
  line-height: var(--theme-line-height-xl);
  letter-spacing: var(--theme-letter-spacing-xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(h6, .ui-heading--6, .theme-heading--6) {
  font-size: var(--theme-font-size-lg);
  line-height: var(--theme-line-height-lg);
  letter-spacing: var(--theme-letter-spacing-lg);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(p, .ui-body, .theme-body) {
  margin-block: 0;
  color: var(--ui-color-text);
  line-height: var(--theme-line-height-xl);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-body--small, .theme-body--small) {
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-caption, .theme-caption) {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  line-height: var(--theme-line-height-xs);
  letter-spacing: var(--theme-letter-spacing-xs);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) a {
  color: var(--ui-color-action);
  text-decoration-thickness: var(--dna-control-border-width);
  text-underline-offset: var(--ui-space-2xs);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-link, .theme-link) {
  color: var(--ui-color-action);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-help, .theme-help) {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  line-height: var(--theme-line-height-xs);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-message, .theme-message) {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  line-height: var(--theme-line-height-xs);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-message--error, .theme-message--error) {
  color: var(--ui-color-status-danger-text);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(.ui-message--success, .theme-message--success) {
  color: var(--ui-color-status-success-text);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(img, video, svg) {
  max-inline-size: 100%;
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where(:focus-visible) {
  outline-color: var(--dna-focus-neutral-color);
  outline-offset: var(--ui-space-2xs);
  outline-style: solid;
  outline-width: var(--dna-control-border-width);
  box-shadow: var(--ui-focus-neutral-ring);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  ::selection {
  color: var(--ui-color-primary-text);
  background-color: var(--ui-color-primary-fill);
}

:where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog)
  :where([disabled], [aria-disabled="true"], .is-disabled) {
  opacity: var(--dna-interaction-disabled-opacity);
}

@media (prefers-reduced-motion: reduce) {
  :where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *,
  :where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *::before,
  :where(.theme-ui-kit, .panel-theme, .section, .uk-modal-dialog) *::after {
    animation-duration: 0ms;
    scroll-behavior: auto;
    transition-duration: 0ms;
  }
}

/* Container, section rhythm, and density primitives. */

:where(.theme-section, .ui-kit-section) {
  --theme-section-space: var(--dna-layout-section-space-md);
  inline-size: 100%;
  padding-block: var(--theme-section-space);
}

:where(.theme-section--sm, .ui-kit-section--sm) {
  --theme-section-space: var(--dna-layout-section-space-sm);
}

:where(.theme-section--lg, .ui-kit-section--lg) {
  --theme-section-space: var(--dna-layout-section-space-lg);
}

:where(.theme-section--xl, .ui-kit-section--xl) {
  --theme-section-space: var(--dna-layout-section-space-xl);
}

:where(.theme-container, .ui-kit-container, .ui-listing-section__container) {
  inline-size: min(100%, var(--dna-layout-container-max-width));
  margin-inline: auto;
  padding-inline: var(--ui-space-md);
}

:where(.ui-listing-section) {
  display: flex;
  min-inline-size: 0;
  inline-size: 100%;
  flex-direction: column;
  gap: var(--dna-card-gap-default);
  padding-block: var(--dna-card-padding-default);
  color: var(--ui-color-text);
  background-color: var(--ui-color-canvas);
}

:where(.ui-listing-section__container, .ui-listing-section__wrapper) {
  display: flex;
  min-inline-size: 0;
  inline-size: 100%;
  flex-direction: column;
  gap: var(--dna-card-gap-default);
}

:where(.ui-listing-section__toolbar, .theme-toolbar) {
  display: flex;
  min-inline-size: 0;
  inline-size: 100%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dna-card-gap-compact);
}

:where(.theme-stack, .ui-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--dna-card-gap-default);
}

:where(.theme-cluster, .ui-cluster) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dna-navigation-item-gap);
}

:where(.theme-grid, .ui-grid) {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--ui-card-min-inline-size)), 1fr)
  );
  gap: var(--dna-card-gap-section);
}

:where(.theme-divider, .ui-divider) {
  block-size: var(--dna-control-border-width);
  inline-size: 100%;
  margin-block: var(--dna-card-gap-default);
  border: 0;
  background-color: var(--ui-color-border);
}