.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-height-md);
  padding: 0 var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-primary);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-accent);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ds-button:hover {
  border-color: var(--ds-color-primary-hover);
  background: var(--ds-color-primary-hover);
}

.ds-button:active {
  border-color: var(--ds-color-primary-active);
  background: var(--ds-color-primary-active);
}

.ds-button--secondary {
  border-color: var(--ds-color-border-strong);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

.ds-button--secondary:hover,
.ds-button--ghost:hover {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-50);
  color: var(--ds-color-primary-active);
}

.ds-button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-text-secondary);
}

.ds-button--danger {
  border-color: var(--ds-color-danger);
  background: var(--ds-color-danger);
  color: var(--ds-color-on-accent);
}

.ds-button--danger:hover {
  filter: brightness(0.92);
}

.ds-button--icon {
  width: var(--ds-control-height-md);
  padding: 0;
}

.ds-button--large {
  min-height: var(--ds-control-height-lg);
  padding-inline: var(--ds-space-4);
  font-size: var(--ds-font-size-md);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
  border-color: var(--ds-color-border);
  background: var(--ds-color-disabled-bg);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
  opacity: 0.8;
}

.ds-button[aria-busy="true"] {
  cursor: progress;
}

.ds-button[aria-busy="true"]::before {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

.ds-card {
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-sm);
}

.ds-card__header,
.ds-card__body,
.ds-card__footer {
  padding: var(--ds-card-padding);
}

.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  border-bottom: var(--ds-border-width) solid var(--ds-color-divider);
}

.ds-card__footer {
  border-top: var(--ds-border-width) solid var(--ds-color-divider);
  background: var(--ds-color-surface-subtle);
}

.ds-card--compact .ds-card__header,
.ds-card--compact .ds-card__body,
.ds-card--compact .ds-card__footer {
  padding: var(--ds-card-padding-compact);
}

.ds-card--kpi {
  border-top: 3px solid var(--ds-color-primary-300);
}

.ds-card--warning {
  border-color: var(--ds-color-warning-border);
  background: var(--ds-color-warning-bg);
}

.ds-card--interactive {
  cursor: pointer;
}

.ds-card--interactive:hover {
  border-color: var(--ds-color-primary-300);
  box-shadow: var(--ds-shadow-md);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-height: 1.25rem;
  padding: 0.125rem var(--ds-space-2);
  border: var(--ds-border-width) solid var(--ds-color-neutral-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-neutral-bg);
  color: var(--ds-color-neutral);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.ds-badge--success,
.ds-badge--bullish,
.ds-badge--profit {
  border-color: var(--ds-color-success-border);
  background: var(--ds-color-success-bg);
  color: var(--ds-color-success);
}

.ds-badge--danger,
.ds-badge--bearish,
.ds-badge--loss {
  border-color: var(--ds-color-danger-border);
  background: var(--ds-color-danger-bg);
  color: var(--ds-color-danger);
}

.ds-badge--warning {
  border-color: var(--ds-color-warning-border);
  background: var(--ds-color-warning-bg);
  color: var(--ds-color-warning);
}

.ds-badge--info {
  border-color: var(--ds-color-info-border);
  background: var(--ds-color-info-bg);
  color: var(--ds-color-info);
}

.ds-field {
  display: grid;
  gap: var(--ds-space-1);
}

.ds-label {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-bold);
}

.ds-help,
.ds-error {
  margin: 0;
  font-size: var(--ds-font-size-xs);
}

.ds-help {
  color: var(--ds-color-text-muted);
}

.ds-error {
  color: var(--ds-color-danger);
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: var(--ds-control-height-md);
  padding: 0 var(--ds-space-2);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

.ds-textarea {
  min-height: 5rem;
  padding-block: var(--ds-space-2);
  resize: vertical;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-color-text-disabled);
}

.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
  border-color: var(--ds-color-danger);
}

.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
  background: var(--ds-color-disabled-bg);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

.ds-table-wrap {
  overflow-x: auto;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
}

.ds-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  font-size: var(--ds-font-size-sm);
}

.ds-table th,
.ds-table td {
  padding: var(--ds-space-2) var(--ds-space-3);
  border-bottom: var(--ds-border-width) solid var(--ds-color-divider);
  text-align: left;
  vertical-align: middle;
}

.ds-table th {
  background: var(--ds-color-neutral-bg);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-bold);
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-table tbody tr:hover {
  background: var(--ds-color-surface-subtle);
}

.ds-table--dense th,
.ds-table--dense td {
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
}

.ds-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-space-3);
  min-height: var(--ds-control-height-lg);
  padding-inline: var(--ds-space-3);
  overflow-x: auto;
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-control-height-lg);
  margin-bottom: -1px;
  padding: 0 var(--ds-space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-font-size-sm);
  text-decoration: none;
  white-space: nowrap;
}

.ds-tab:hover {
  color: var(--ds-color-text);
}

.ds-tab[aria-current="page"],
.ds-tab[aria-selected="true"] {
  border-bottom-color: var(--ds-color-primary);
  color: var(--ds-color-primary-active);
  font-weight: var(--ds-font-weight-bold);
}

.ds-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-height-md);
  padding: 0 var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-neutral-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.ds-chip:hover {
  background: var(--ds-color-surface-subtle);
}

.ds-chip[aria-pressed="true"],
.ds-chip[aria-current="true"],
.ds-chip[aria-current="page"] {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-accent);
}

.ds-chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--ds-space-1);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-neutral-bg);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-font-size-2xs);
}

.ds-chip[aria-pressed="true"] .ds-chip__count,
.ds-chip[aria-current="true"] .ds-chip__count,
.ds-chip[aria-current="page"] .ds-chip__count {
  background: var(--ds-color-on-accent-muted);
  color: var(--ds-color-on-accent);
}

.ds-global-nav {
  display: flex;
  align-items: center;
  min-height: var(--ds-header-height);
  padding-inline: var(--ds-page-gutter);
  padding-block: 0;
  border-bottom: 3px solid var(--ds-color-nav-border);
  background: var(--ds-color-nav-bg);
  color: var(--ds-color-nav-text);
}

.ds-global-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-control-height-md);
  color: var(--ds-color-nav-text);
  font-size: var(--ds-font-size-sm);
  text-decoration: none;
}

.ds-global-nav .ds-page-title {
  color: var(--ds-color-nav-text-active);
  margin-left: var(--ds-space-8);
}

.ds-global-nav a:hover,
.ds-global-nav a[aria-current="page"] {
  color: var(--ds-color-nav-text-active);
}

.ds-global-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ds-color-primary-500);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5rem;
}

.ds-tooltip {
  position: relative;
}

.ds-tooltip__content {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + var(--ds-space-2));
  left: 50%;
  width: max-content;
  max-width: 18rem;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-chart-tooltip);
  color: var(--ds-color-chart-tooltip-text);
  box-shadow: var(--ds-shadow-md);
  font-size: var(--ds-font-size-xs);
  line-height: var(--ds-line-height-body);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--ds-space-1));
  visibility: hidden;
}

.ds-tooltip:hover .ds-tooltip__content,
.ds-tooltip:focus-within .ds-tooltip__content {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.ds-progress {
  overflow: hidden;
  height: 0.375rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-neutral-bg);
}

.ds-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-primary);
}

@media (max-width: 47.5rem) {
  .ds-global-nav .ds-page-title {
    margin-left: var(--ds-space-6);
  }
}