/* Shared D’AUBE interface primitives. No route-owned palette values belong here. */

.ds-shell {
  min-height: 100dvh;
  background: var(--ds-canvas);
  color: var(--ds-text-primary);
  transition:
    background-color var(--ds-motion-standard) var(--ds-ease-standard),
    color var(--ds-motion-standard) var(--ds-ease-standard);
}

.ds-shell__content {
  width: min(100%, var(--ds-content-max));
  margin-inline: auto;
  padding-inline: var(--ds-space-page-inline);
}

.ds-site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--ds-border-subtle);
  background: var(--ds-nav-bg);
  color: var(--ds-nav-text);
}

.ds-site-header__inner,
.ds-site-footer__inner {
  width: min(100%, var(--ds-content-max));
  margin-inline: auto;
  padding: var(--ds-space-6) var(--ds-space-page-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6);
}

.ds-site-header__brand {
  color: inherit;
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.ds-site-header__nav,
.ds-site-header__actions,
.ds-mode-switch {
  display: flex;
  align-items: center;
  gap: var(--ds-space-control-gap);
  flex-wrap: wrap;
}

.ds-nav-link,
.ds-mode-switch__option,
.ds-action {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ds-motion-micro) var(--ds-ease-standard),
    border-color var(--ds-motion-micro) var(--ds-ease-standard),
    transform var(--ds-motion-micro) var(--ds-ease-standard);
}

.ds-nav-link,
.ds-mode-switch__option {
  padding: var(--ds-space-4) var(--ds-space-5);
}

.ds-nav-link[aria-current="page"],
.ds-mode-switch__option[aria-pressed="true"] {
  border-color: var(--ds-border-subtle);
  background: var(--ds-surface-elevated);
}

.ds-action {
  padding: var(--ds-space-5) var(--ds-space-6);
  border-color: var(--ds-border-subtle);
}

.ds-action[data-variant="primary"] {
  border-color: var(--ds-button-primary-bg);
  background: var(--ds-button-primary-bg);
  color: var(--ds-button-primary-text);
}

.ds-nav-link:hover,
.ds-mode-switch__option:hover,
.ds-action:hover {
  transform: translateY(-1px);
}

.ds-nav-link:focus-visible,
.ds-mode-switch__option:focus-visible,
.ds-action:focus-visible,
.ds-site-header__brand:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.ds-mode-switch {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.ds-mode-switch__legend {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ds-state-panel {
  border: 1px solid var(--ds-card-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-state-bg);
  color: var(--ds-state-text);
  padding: var(--ds-space-card-padding);
  display: grid;
  gap: var(--ds-space-5);
}

.ds-state-panel__eyebrow {
  color: var(--ds-text-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds-state-panel__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.ds-state-panel__description {
  margin: 0;
  max-width: 68ch;
  color: var(--ds-text-secondary);
  line-height: 1.6;
}

.ds-site-footer {
  margin-top: var(--ds-space-section-y);
  border-top: 1px solid var(--ds-border-subtle);
  color: var(--ds-text-secondary);
}

[data-daube-large-text="true"] {
  font-size: 112.5%;
}

[data-daube-reduced-motion="true"] .ds-shell,
[data-daube-reduced-motion="true"] .ds-nav-link,
[data-daube-reduced-motion="true"] .ds-mode-switch__option,
[data-daube-reduced-motion="true"] .ds-action {
  transition-duration: 1ms;
  transform: none;
}

@media (max-width: 767px) {
  .ds-site-header__inner,
  .ds-site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-site-header__nav,
  .ds-site-header__actions {
    width: 100%;
  }

  .ds-nav-link,
  .ds-mode-switch__option,
  .ds-action {
    min-height: 44px;
  }
}