/**
 * Nova Commerce Suite - Design System Foundation.
 * Shared tokens and resilient component primitives.
 */

:root {
  /* Brand aliases preserve all existing appearance settings. */
  --ncd-color-primary: var(--ncd-primary, #0b3d2e);
  --ncd-color-accent: var(--ncd-gold, #c8a951);
  --ncd-color-interactive: var(--ncd-hover, #fb933c);
  --ncd-color-surface: var(--ncd-bg, #fff);
  --ncd-color-text: var(--ncd-text, #1f2937);
  --ncd-color-muted: var(--ncd-muted, #6b7280);
  --ncd-color-border: var(--ncd-border, #e5e7eb);

  /* Spacing scale. */
  --ncd-space-1: 4px;
  --ncd-space-2: 8px;
  --ncd-space-3: 12px;
  --ncd-space-4: 16px;
  --ncd-space-5: 20px;
  --ncd-space-6: 24px;
  --ncd-space-8: 32px;

  /* Radius scale. */
  --ncd-radius-sm: max(8px, calc(var(--ncd-radius, 12px) - 4px));
  --ncd-radius-md: var(--ncd-radius, 12px);
  --ncd-radius-lg: calc(var(--ncd-radius, 12px) + 4px);
  --ncd-radius-xl: calc(var(--ncd-radius, 12px) + 8px);
  --ncd-radius-pill: 999px;

  /* Elevation and borders. */
  --ncd-border-width: 1px;
  --ncd-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
  --ncd-shadow-sm: 0 4px 14px rgb(15 23 42 / 0.06);
  --ncd-shadow-md: 0 12px 32px rgb(15 23 42 / 0.10);

  /* Motion. */
  --ncd-duration-fast: 150ms;
  --ncd-duration-normal: 220ms;
  --ncd-duration-slow: var(--ncd-speed, 320ms);
  --ncd-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ncd-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Interaction sizes. */
  --ncd-control-sm: 40px;
  --ncd-control-md: 48px;
  --ncd-control-lg: 56px;
  --ncd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ncd-color-accent) 52%, transparent);
}

/* Shared component primitives. Specific component files may refine these. */
.ncd-drawer :where(button, input, select, textarea) {
  font: inherit;
}

.ncd-drawer :where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

.ncd-drawer :where(button, [role="button"], a) {
  transition-duration: var(--ncd-duration-normal);
  transition-timing-function: var(--ncd-ease-standard);
}

.ncd-drawer :where(input, select, textarea) {
  border-radius: var(--ncd-radius-md);
  transition: border-color var(--ncd-duration-fast) var(--ncd-ease-standard),
    box-shadow var(--ncd-duration-fast) var(--ncd-ease-standard),
    background-color var(--ncd-duration-fast) var(--ncd-ease-standard);
}

.ncd-drawer :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ncd-focus-ring);
}

.ncd-drawer :where(button, input)[disabled],
.ncd-drawer :where(button, input)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

/* Keep motion accessible without removing useful state changes. */
@media (prefers-reduced-motion: reduce) {
  .ncd-drawer *,
  .ncd-drawer *::before,
  .ncd-drawer *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Improve legibility in Windows High Contrast / forced-colors mode. */
@media (forced-colors: active) {
  .ncd-drawer :where(button, a, input, select, textarea) {
    border: 1px solid ButtonText;
  }

  .ncd-drawer :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}