:root {
  --so-color-canvas: #f4f8fd;
  --so-color-canvas-accent: #e9f1fb;
  --so-color-surface: #ffffff;
  --so-color-surface-subtle: #f7faff;
  --so-color-text: #0e2454;
  --so-color-muted: #52637f;
  --so-color-border: #b7c8df;
  --so-color-action: #08756f;
  --so-color-action-hover: #065f5b;
  --so-color-action-soft: #e7f8f6;
  --so-color-on-action: #ffffff;
  --so-color-text-on-bright: #04111f;
  --so-color-focus: #9a3412;
  --so-color-info: #075985;
  --so-color-info-soft: #e0f2fe;
  --so-color-success: #166534;
  --so-color-success-soft: #e9f8ee;
  --so-color-warning: #854d0e;
  --so-color-warning-soft: #fff7e6;
  --so-color-danger: #b42318;
  --so-color-danger-soft: #fff1f0;
  --so-color-surface-strong: #10233f;
  --so-color-surface-strong-accent: #1d4d7d;
  --so-color-text-on-strong: #f7fbff;
  --so-color-muted-on-strong: #dcecff;
  --so-color-border-on-strong: #4f7aa4;
  --so-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --so-space-1: 4px;
  --so-space-2: 8px;
  --so-space-3: 12px;
  --so-space-4: 16px;
  --so-space-5: 20px;
  --so-space-6: 24px;
  --so-space-8: 32px;
  --so-control-height-sm: 36px;
  --so-control-height-md: 44px;
  --so-control-height-lg: 48px;
  --so-radius-sm: 8px;
  --so-radius-md: 12px;
  --so-radius-lg: 18px;
  --so-shadow-panel: 0 18px 48px rgba(18, 41, 83, 0.12);
}

/* Pseudo-code:
 * 1. Give every module the same typography and visible keyboard focus language.
 * 2. Keep screen-reader-only labels available without affecting visual layout.
 * 3. Expose semantic color, state, spacing, and control-size tokens so module
 *    base aliases share one visual language while decorative art stays scoped.
 */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--so-font-sans) !important;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--so-color-focus) !important;
  outline-offset: 3px;
}

.sr-only {
  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;
}

body.shell-mobile-menu-open {
  overflow: hidden;
}