:root {
  color-scheme: light;
  --ds-blue-500: #2297df;
  --ds-blue-600: #1a6fd1;
  --ds-cyan-400: #75d2c5;
  --ds-green-500: #69bd65;
  --ds-navy-950: #071826;
  --ds-neutral-0: #fff;
  --ds-neutral-25: #fbfbf8;
  --ds-neutral-50: #f5f5f2;
  --ds-neutral-100: #edede9;
  --ds-neutral-200: #d8d7d2;
  --ds-neutral-500: #777572;
  --ds-neutral-800: #3d3b39;
  --ds-neutral-950: #252422;
  --ds-surface-canvas: var(--ds-neutral-50);
  --ds-surface-paper: var(--ds-neutral-25);
  --ds-surface-inverse: var(--ds-navy-950);
  --ds-text-primary: var(--ds-neutral-800);
  --ds-text-secondary: var(--ds-neutral-500);
  --ds-text-inverse: #f8fbff;
  --ds-border-subtle: var(--ds-neutral-200);
  --ds-action-primary: var(--ds-neutral-950);
  --ds-action-accent: var(--ds-blue-500);
  --ds-focus: #0b75bd;
  --ds-selection: #bce8ff;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-30: 120px;
  --ds-radius-sm: 6px;
  --ds-radius-control: 8px;
  --ds-radius-card: 14px;
  --ds-radius-window: 20px;
  --ds-radius-pill: 999px;
  --ds-shadow-control: 0 3px 7px rgba(25, 24, 22, .14);
  --ds-shadow-card: 0 18px 45px rgba(40, 38, 34, .07);
  --ds-shadow-float: 0 24px 70px rgba(18, 34, 45, .16);
  --ds-duration-fast: 160ms;
  --ds-duration-base: 240ms;
  --ds-duration-slow: 700ms;
  --ds-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ds-container-wide: 1220px;
  --ds-container-content: 1115px;
  --ds-measure: 70ch;
  --ds-header-height: 91px;

  /* Compatibility aliases consumed by the existing routes. */
  --surface: var(--ds-surface-canvas);
  --paper: var(--ds-surface-paper);
  --ink: var(--ds-text-primary);
  --muted: var(--ds-text-secondary);
  --line: var(--ds-border-subtle);
  --blue: var(--ds-action-accent);
  --deep-blue: var(--ds-blue-600);
  --green: var(--ds-green-500);
  --shadow: var(--ds-shadow-card);
  --ease: var(--ds-ease-out);
}

html {
  accent-color: var(--ds-action-accent);
  scrollbar-color: #aaa8a3 var(--ds-surface-canvas);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--ds-neutral-950);
  background: var(--ds-selection);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-focus) 72%, white);
  outline-offset: 3px;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(.button, .dark-button, .soft-button, .inner-cta) {
  border-radius: var(--ds-radius-control);
  cursor: pointer;
  transition: transform var(--ds-duration-fast) var(--ds-ease-out), box-shadow var(--ds-duration-base) var(--ds-ease-out), background-color var(--ds-duration-fast) ease;
}

:where(.button, .dark-button, .soft-button, .inner-cta):active {
  transform: translateY(0) scale(.985);
}

:where(button, .button, .dark-button, .soft-button, .inner-cta):disabled,
:where(.button, .dark-button, .soft-button, .inner-cta)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
  pointer-events: none;
  box-shadow: none;
}

.ds-container {
  width: min(var(--ds-container-wide), calc(100% - 64px));
  margin-inline: auto;
}

.ds-surface {
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface-paper);
  box-shadow: var(--ds-shadow-card);
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: var(--ds-space-3);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-paper);
  color: var(--ds-text-secondary);
  font-size: var(--type-caption-size, 12px);
  line-height: 1;
}

@media (max-width: 600px) {
  :root { --ds-header-height: 71px; }
  .ds-container { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; }
}