:root {
  /* Semantic surfaces: aliases keep the existing visual identity stable while
     future components stop depending on legacy implementation names. */
  --surface-canvas: var(--bg);
  --surface-soft: var(--bg-soft);
  --surface-panel: var(--panel);
  --surface-panel-solid: var(--panel-solid);
  --surface-raised: var(--panel-2);

  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--subtle);

  --status-available: var(--green);
  --status-available-strong: var(--green-2);
  --status-unavailable: var(--gray);
  --status-warning: var(--amber);
  --status-negative: var(--red);
  --status-information: var(--blue);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --tap-target: 44px;
  --content-max: 1480px;
  --content-gutter: 24px;
  --motion-fast: 140ms;
  --motion-standard: 220ms;

  /* Initial content-driven responsive states. These are implementation
     boundaries, not device names, and may move as Run 2 components mature. */
  --layout-state: expanded;
}

html[data-layout="medium"] { --layout-state: medium; }
html[data-layout="compact"] {
  --layout-state: compact;
  --content-gutter: 16px;
}

.vsw-surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
}

.vsw-badge,
.vsw-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.vsw-badge[data-tone="available"] { color: var(--status-available-strong); }
.vsw-badge[data-tone="unavailable"] { color: var(--status-unavailable); }
.vsw-badge[data-tone="warning"] { color: var(--status-warning); }

.vsw-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.vsw-metric > small {
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vsw-metric > strong { color: var(--text-primary); }

.vsw-touch-target {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

.vsw-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1119px) {
  :root { --layout-state: medium; }
}

@media (max-width: 759px) {
  :root {
    --layout-state: compact;
    --content-gutter: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}