/* Aurora component primitives composed from design-system tokens. */

.ui-modal {
  background-color: var(--ds-semantic-surface-default, #ffffff);
  color: var(--ds-semantic-text-default, #121a2c);
  border-radius: var(--ds-radii-radius-xl, 1rem);
  box-shadow: var(
    --ds-shadows-shadow-elevated,
    0 32px 72px -28px rgba(18, 24, 43, 0.34)
  );
  border: 1px solid
    var(--ds-semantic-border-default, rgba(216, 219, 235, 1));
}

.ui-modal__header,
.ui-modal__footer {
  padding: var(--ds-spacing-spacing-lg, 1.5rem);
  background-color: color-mix(
    in srgb,
    var(--ds-semantic-surface-muted, #f2f4f9) 88%,
    transparent
  );
}

.ui-modal__body {
  padding: var(--ds-spacing-spacing-lg, 1.5rem);
}

.ui-dropdown__button {
  border-radius: var(--ds-radii-radius-lg, 0.75rem);
  transition: background-color var(--ds-motion-transition-duration, 180ms)
      var(--ds-motion-transition-easing, cubic-bezier(0.36, 0, 0.2, 1)),
    color var(--ds-motion-transition-duration, 180ms)
      var(--ds-motion-transition-easing, cubic-bezier(0.36, 0, 0.2, 1));
}

.ui-dropdown__button:hover {
  background-color: color-mix(
    in srgb,
    var(--ds-color-brand-600, #5b3bec) 12%,
    transparent
  );
  color: var(--ds-color-brand-700, #4a2fd1);
}

.ui-dropdown__menu {
  background-color: var(--ds-semantic-surface-alt, #f8f8fd);
  border: 1px solid var(--ds-semantic-border-default, #d8dbeb);
  border-radius: var(--ds-radii-radius-lg, 0.75rem);
  box-shadow: var(
    --ds-shadows-shadow-popover,
    0 24px 56px -26px rgba(18, 24, 43, 0.32)
  );
  color: var(--ds-semantic-text-default, #121a2c);
}

.ui-dropdown__item:hover,
.ui-dropdown__item:focus {
  background-color: color-mix(
    in srgb,
    var(--ds-color-brand-600, #5b3bec) 12%,
    transparent
  );
  color: var(--ds-color-brand-700, #4a2fd1);
}

.ui-skip-link {
  background-color: var(--ds-color-brand-600, #5b3bec);
  color: var(--ds-color-text-inverse, #ffffff);
  border-radius: var(--ds-radii-radius-full, 9999px);
  padding: var(--ds-spacing-spacing-xs, 0.375rem)
    var(--ds-spacing-spacing-sm, 0.625rem);
  box-shadow: var(
    --ds-shadows-shadow-focus,
    0 0 0 3px rgba(91, 59, 236, 0.35)
  );
}

.ui-skip-link:focus {
  background-color: var(--ds-color-brand-700, #4a2fd1);
  outline: none;
}

[data-theme="dark"] .ui-modal {
  background-color: var(--ds-theme-dark-surface, #101525);
  color: var(--ds-theme-dark-text-primary, #e4e7f6);
  border-color: var(--ds-theme-dark-border, rgba(144, 156, 200, 0.38));
}

[data-theme="dark"] .ui-dropdown__menu {
  background-color: var(--ds-theme-dark-surface-muted, #121a2c);
  color: var(--ds-theme-dark-text-primary, #e4e7f6);
  border-color: var(--ds-theme-dark-border, rgba(144, 156, 200, 0.38));
}

[data-theme="dark"] .ui-skip-link {
  background-color: var(--ds-color-brand-500, #7f57ff);
}
