:root{
  /* Brand */
  --rx-brand-900: #123444;
  --rx-brand-800: #324458;
  --rx-brand-400: #A08487;

  /* Surface */
  --rx-surface-50: #F6F3EF;
  --rx-surface-200: #D6D3CE;

  /* Accent */
  --rx-accent-600: #BD6C46;
  --rx-accent-500: #D16289;
  --rx-accent-400: #DF9C3E;

  /* Text */
  --rx-text-900: #1C2B2E;
  --rx-text-700: #324458;
  --rx-text-500: #A08487;

  /* Typography */
  --rx-font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --rx-font-display: Manrope, Inter, system-ui;

  --rx-text-xs: 12px;
  --rx-text-sm: 14px;
  --rx-text-md: 16px;
  --rx-text-lg: 18px;
  --rx-text-xl: 20px;
  --rx-text-2xl: 24px;

  --rx-leading-tight: 1.15;
  --rx-leading-normal: 1.4;
  --rx-leading-relaxed: 1.6;

  /* Space */
  --rx-space-1: 4px;
  --rx-space-2: 8px;
  --rx-space-3: 12px;
  --rx-space-4: 16px;
  --rx-space-6: 24px;
  --rx-space-8: 32px;
  --rx-space-12: 48px;

  /* Radius */
  --rx-radius-md: 12px;
  --rx-radius-lg: 16px;
  --rx-radius-xl: 20px;
  --rx-radius-pill: 999px;

  /* Shadow */
  --rx-shadow-1: 0 1px 2px rgba(18,52,68,.08);
  --rx-shadow-2: 0 8px 24px rgba(18,52,68,.12);

  /* Utility */
  --rx-focus: var(--rx-accent-600);
}

:focus-visible{
  outline: 2px solid var(--rx-focus);
  outline-offset: 2px;
}