:root {
  color-scheme: dark;

  --sx-color-void: #05070d;
  --sx-color-arena: #080d17;
  --sx-color-surface: #0e1524;
  --sx-color-surface-elevated: #151f33;
  --sx-color-surface-interactive: #1c2940;
  --sx-color-border: #2a3852;
  --sx-color-border-active: #405575;
  --sx-color-text: #f4f8ff;
  --sx-color-text-secondary: #a7b2c5;
  --sx-color-text-disabled: #69758a;
  --sx-color-cyan: #20e7ff;
  --sx-color-cyan-highlight: #79f3ff;
  --sx-color-purple: #9b5cff;
  --sx-color-purple-highlight: #c18cff;
  --sx-color-success: #43d99c;
  --sx-color-warning: #ffd166;
  --sx-color-danger: #ff5d73;

  --sx-color-surface-glass: rgba(14, 21, 36, .94);
  --sx-color-overlay: rgba(5, 7, 13, .84);
  --sx-color-cyan-soft: rgba(32, 231, 255, .12);
  --sx-color-purple-soft: rgba(155, 92, 255, .12);
  --sx-color-border-soft: rgba(64, 85, 117, .68);

  --sx-space-1: 4px;
  --sx-space-2: 8px;
  --sx-space-3: 12px;
  --sx-space-4: 16px;
  --sx-space-5: 20px;
  --sx-space-6: 24px;
  --sx-space-8: 32px;

  --sx-radius-sm: 4px;
  --sx-radius-md: 6px;
  --sx-radius-lg: 8px;
  --sx-radius-pill: 999px;
  --sx-border-width: 1px;
  --sx-focus-width: 2px;

  --sx-shadow-panel: 0 16px 46px rgba(0, 0, 0, .34);
  --sx-shadow-modal: 0 28px 84px rgba(0, 0, 0, .58);
  --sx-glow-ui: 0 0 16px rgba(32, 231, 255, .18);
  --sx-glow-cyan: 0 0 22px rgba(32, 231, 255, .38);
  --sx-glow-purple: 0 0 22px rgba(155, 92, 255, .34);

  --sx-duration-fast: 120ms;
  --sx-duration-base: 180ms;
  --sx-duration-reward: 240ms;
  --sx-ease-standard: cubic-bezier(.2, .8, .2, 1);

  --sx-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sx-font-display: Oxanium, "Arial Narrow", "Segoe UI", sans-serif;
  --sx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sx-type-display: 32px;
  --sx-type-title: 24px;
  --sx-type-body: 14px;
  --sx-type-label: 12px;
  --sx-type-micro: 11px;
  --sx-line-display: 40px;
  --sx-line-title: 30px;
  --sx-line-body: 20px;
  --sx-line-label: 16px;
  --sx-line-micro: 16px;

  /* Compatibility aliases for the existing screens during phased migration. */
  --bg: var(--sx-color-void);
  --panel: var(--sx-color-surface-elevated);
  --panel-2: var(--sx-color-surface-interactive);
  --panel2: var(--sx-color-surface-interactive);
  --text: var(--sx-color-text);
  --muted: var(--sx-color-text-secondary);
  --blue: var(--sx-color-cyan);
  --green: var(--sx-color-success);
  --yellow: var(--sx-color-warning);
  --red: var(--sx-color-danger);
  --pink: var(--sx-color-purple-highlight);
}

.country-flag {
  display: inline-block;
  width: 30px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(244, 248, 255, .2);
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

@media (max-width: 620px) {
  :root {
    --sx-type-display: 28px;
    --sx-line-display: 34px;
  }
}