/* 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);
}
/* Appearance: a small labelled control at the end of the collections row, drawn like the site's selects (a hairline,
   the search field's 6px corner, 14px type) so it reads as a setting, not a result. Phones keep it in the menu (docs.js). */
.dtheme { display: flex; visibility: hidden; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.theme-ready .dtheme { visibility: visible; }
.dtheme__label { font: var(--type-ui-s); color: var(--text-muted); cursor: pointer; }
.dtheme__field { position: relative; display: inline-flex; align-items: center; color: var(--text-muted); }
.dtheme__field::after { content: ''; position: absolute; right: 12px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.dtheme select { -webkit-appearance: none; appearance: none; height: var(--button-height-sm); padding: 0 var(--space-8) 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: transparent; color: var(--text); font: var(--type-ui-s); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.dtheme__field:hover { color: var(--text-strong); }
.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); }
.skip { color: var(--btn-primary-fg); background: var(--btn-primary-bg); }
.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 (any-pointer: coarse) { .dtheme select { height: 44px; } }
@media (max-width: 640px) {
  .dcollections > div { gap: var(--space-6); }
  .dcollections .dtheme { display: none; }
  .dnav__more .dtheme { justify-content: space-between; margin: 0 0 var(--space-5); }
  .dnav__more .dtheme__label { font: var(--type-ui); color: var(--text); }
  .dnav__more .dtheme select { height: var(--touch-target); min-width: 10rem; font-size: var(--touch-input-font-size); background: var(--bg-surface); }
}
@media (max-width: 360px) { .dcollections > div { gap: var(--space-4); padding-inline: var(--space-4); } }