/* Figma: Wizlo / Color and Wizlo / Metrics. Keep shared design decisions here. */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Outfit-Variable.ttf') format('truetype');
}
:root {
  --wz-primary: #6751eb;
  --wz-primary-hover: #5540d7;
  --wz-primary-pressed: #4731b8;
  --wz-lavender: #e2b3f3;
  --wz-navy: #070e29;
  --wz-text: #070e29;
  --wz-muted: #626780;
  --wz-placeholder: #72758c;
  --wz-disabled: #a2a5b5;
  --wz-page: #faf9fe;
  --wz-surface: #fff;
  --wz-subtle: #f6f3ff;
  --wz-header: #eef3f9;
  --wz-header-border: #ced7e5;
  --wz-border: #d8d5e5;
  --wz-disabled-bg: #f2f3f7;
  --wz-back-bg: #f0ecff;
  --wz-back-border: #e2dcf5;
  --wz-error: #b42318;
  --wz-error-bg: #fef3f2;
  --wz-success: #067647;
  --wz-success-bg: #ecfdf3;
  --wz-warning: #b54708;
  --wz-warning-bg: #fffaeb;
  --wz-info: #175cd3;
  --wz-info-bg: #eff8ff;
  --wz-space-1: 4px;
  --wz-space-2: 8px;
  --wz-space-3: 12px;
  --wz-space-4: 16px;
  --wz-space-5: 20px;
  --wz-space-6: 24px;
  --wz-space-8: 32px;
  --wz-space-12: 48px;
  --wz-radius-sm: 8px;
  --wz-radius-md: 12px;
  --wz-radius-lg: 16px;
  --wz-radius-pill: 999px;
  --wz-control-height: 48px;
  --wz-sidebar-width: 288px;
  --wz-header-height: 76px;
  --bs-primary: var(--wz-primary);
  --bs-primary-rgb: 103, 81, 235;
  --bs-body-font-family: Outfit, system-ui, sans-serif;
  --bs-body-color: var(--wz-text);
  --bs-body-bg: var(--wz-surface);
  --bs-border-color: var(--wz-border);
  --bs-link-color: var(--wz-primary);
  --bs-link-color-rgb: 103, 81, 235;
  --bs-link-hover-color: var(--wz-primary-hover);
  --bs-link-hover-color-rgb: 85, 64, 215;
  --bs-form-invalid-color: var(--wz-error);
  --bs-form-invalid-border-color: var(--wz-error);
  --bs-form-valid-color: var(--wz-success);
  --bs-form-valid-border-color: var(--wz-success);
}