/* Shared XSCAPE flight-instrument contract. Presentation only. */
:root {
  color-scheme: dark;
  --x-font-display: "Xscape VT323", "VT323", monospace;
  --x-font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --x-type-xs: .6875rem;
  --x-type-sm: .8125rem;
  --x-type-md: 1rem;
  --x-type-lg: 1.25rem;
  --x-type-xl: 1.75rem;
  --x-type-display: clamp(2.25rem, 5vw, 4.75rem);
  --x-leading-tight: .92;
  --x-leading-copy: 1.55;
  --x-tracking-label: .14em;
  --x-tracking-display: .035em;
  --x-space-1: .25rem;
  --x-space-2: .5rem;
  --x-space-3: .75rem;
  --x-space-4: 1rem;
  --x-space-5: 1.25rem;
  --x-space-6: 1.5rem;
  --x-space-8: 2rem;
  --x-space-10: 2.5rem;
  --x-space-12: 3rem;
  --x-color-void: #060912;
  --x-color-ground: #0a101a;
  --x-color-surface-1: #0f1824;
  --x-color-surface-2: #142231;
  --x-color-surface-3: #1b2c3d;
  --x-color-ink: #edf4f2;
  --x-color-muted: #a6b8c2;
  --x-color-dim: #718693;
  --x-color-line: #385166;
  --x-color-line-soft: #263b4d;
  --x-signal-navigation: #70e0ef;
  --x-signal-objective: #ffc86b;
  --x-signal-ready: #85e0b0;
  --x-signal-danger: #ff747d;
  --x-signal-route: #b69aff;
  --x-signal-neutral: #b7c8d1;
  --x-focus: #f5f0ff;
  --x-focus-ring: 0 0 0 2px var(--x-color-void), 0 0 0 4px var(--x-focus);
  --x-radius-none: 0;
  --x-border-hairline: 1px solid var(--x-color-line);
  --x-border-active: 1px solid var(--x-signal-navigation);
  --x-shadow-panel: 0 1.25rem 3rem rgb(0 0 0 / .32);
  --x-shadow-signal: 0 0 1.75rem rgb(112 224 239 / .2);
  --x-motion-fast: 120ms;
  --x-motion-base: 220ms;
  --x-motion-slow: 420ms;
  --x-ease-instrument: cubic-bezier(.22, 1, .36, 1);
  --x-ease-linear: linear;
}
:where(.xscape-surface) { border-radius: var(--x-radius-none); border: var(--x-border-hairline); background: var(--x-color-surface-1); box-shadow: var(--x-shadow-panel); }
:where(.xscape-eyebrow) { color: var(--x-color-muted); font: var(--x-type-xs)/1.3 var(--x-font-body); letter-spacing: var(--x-tracking-label); text-transform: uppercase; }
:where(body) :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 0; box-shadow: var(--x-focus-ring); }
@media (prefers-reduced-motion: reduce) {
  :where(body) *, :where(body) *::before, :where(body) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}