/* Aliases connect the existing docs components to the canonical Railbed palette.
   docs-tokens.css is generated from design-system/tokens/tokens.css, without its font import or base rules. */
:root {
  --paper: var(--bg-page);
  --surface: var(--bg-surface);
  --stone: var(--bg-sunken);
  --wash: var(--bg-surface-tint);
  --ink: var(--text-strong);
  --ink-hover: var(--btn-primary-hover);
  --body: var(--text-body);
  --muted: var(--text-muted);
  --faint: var(--text-placeholder);
  --green: var(--text-positive);
  --amber: var(--text-warning);
  --red: var(--text-critical);
}
.dtheme { display: flex; visibility: hidden; align-items: center; margin-left: var(--space-2); }
.theme-ready .dtheme { visibility: visible; }
.dtheme select { min-height: 44px; width: 128px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: var(--text-muted); font: var(--type-ui-s); cursor: pointer; }
.dtheme select:hover { border-color: var(--border-input); color: var(--text-strong); }
.dtheme select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.dtheme option { background: var(--bg-surface); color: var(--text-strong); }
.dtop__links .dtop__cta, .skip { color: var(--btn-primary-fg); background: var(--btn-primary-bg); }
.dtop__links .dtop__cta:hover { background: var(--btn-primary-hover); }
.docs .prose ::selection { background: var(--selection); color: var(--text-strong); }
.docs .dsearch__input { border-color: var(--border-input); }
.docs .guide-preview { border-color: var(--border); }
.docs .demo-check { color: var(--text-positive); }
@media (max-width: 640px) {
  .dcollections > div { gap: var(--space-3); flex-wrap: wrap; }
  .dcollections .dcollections__api { display: none; }
  .dtheme { margin-left: auto; }
  .dtheme select { width: 8.75rem; min-height: 48px; padding-inline: var(--space-2); font-size: 1rem; }
}
@media (max-width: 360px) { .dcollections > div { gap: var(--space-2); padding-inline: var(--space-3); } }