/**
 * Missing primitive API tokens (3.00.1).
 * Aliases only — values come from semantic tokens when present.
 */
:root,
.ds-standalone,
.hx-example[data-theme="light"] {
  --hx-focus: var(--color-focus, #2b6cb0);
  --hx-focus-offset: 2px;
  --hx-field-bg: var(--color-bg-base, #fff);
  --hx-field-fg: var(--color-text-primary, #121212);
  --hx-field-line: var(--color-border, #d0d0d0);
  --hx-field-line-hover: var(--color-border-strong, #8a8a8a);
  --hx-field-line-invalid: var(--color-danger, #b42318);
  --hx-scrim: color-mix(in srgb, var(--color-charcoal, #121212) 45%, transparent);
  --hx-shell-header: 48px;
  --hx-rail-width: 260px;
  --hx-toc-width: 220px;
  --hx-target: 44px;
  --hx-btn-height-md: 40px;
  --hx-btn-height-lg: 48px;
  --hx-on-primary: var(--color-text-on-primary, #fff);
}

html[data-theme="dark"],
.ds-standalone[data-theme="dark"],
.hx-example[data-theme="dark"],
.hx-preview-card[data-theme="dark"] {
  --hx-surface: var(--color-bg-inverse, #171717);
  --hx-fg: var(--color-text-inverse, #f5f5f5);
  --hx-line: var(--color-border-inverse, #3a3a3a);
  --hx-field-bg: var(--color-bg-inverse, #171717);
  --hx-field-fg: var(--color-text-inverse, #f5f5f5);
  --hx-field-line: var(--color-border-inverse, #3a3a3a);
  --hx-scrim: color-mix(in srgb, #000 55%, transparent);
}

.hx-example[data-hx-vp="mobile"] .hx-example__stage,
.hx-preview-card[data-hx-vp="mobile"] .hx-preview-card__stage {
  max-width: 390px;
  margin-inline: auto;
}

.hx-example[data-theme="dark"] .hx-example__stage,
.hx-preview-card[data-theme="dark"] .hx-preview-card__stage {
  background: var(--hx-surface);
  color: var(--hx-fg);
}

.hx-btn,
[data-hx="button"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: var(--hx-btn-height-md);
  padding: 0 var(--space-4, 16px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  background: var(--hx-primary, var(--color-action-primary, #171717));
  color: var(--hx-on-primary);
  font: inherit;
}
.hx-btn:focus-visible,
[data-hx="button"]:focus-visible {
  outline: 2px solid var(--hx-focus);
  outline-offset: var(--hx-focus-offset);
}