/* Design tokens · primary #0077FA · fleet t150u */
:root {
  --ys-primary: #0077FA;
  --ys-primary-hover: #0062D6;
  --ys-primary-active: #004FB3;
  --ys-primary-soft: #E8F3FF;
  --ys-primary-light: #54A9FF;

  --ys-success: #3BB346;
  --ys-success-soft: #ECF7EC;
  --ys-warning: #FC8800;
  --ys-warning-soft: #FFF8EA;
  --ys-danger: #F93920;
  --ys-danger-soft: #FEF2ED;
  --ys-info: #0077FA;
  --ys-info-soft: #EAF5FF;

  --ys-text-0: #1C1F23;
  --ys-text-1: #1C1F23;
  --ys-text-2: #555B61;
  --ys-text-3: #888E94;
  --ys-text-4: #C6CACD;

  --ys-border: #E6E8EA;
  --ys-border-2: #C6CACD;
  --ys-border-3: #888E94;
  --ys-fill-0: #F9F9F9;
  --ys-fill-1: #F9F9F9;
  --ys-fill-2: #E6E8EA;
  --ys-bg: #FFFFFF;

  --ys-radius-extra-small: 3px;
  --ys-radius-small: 3px;
  --ys-radius-medium: 6px;
  --ys-radius-large: 12px;
  --ys-radius-circle: 50%;
  --ys-radius-full: 9999px;

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

  --ys-shadow-1: 0 1px 2px rgba(28, 31, 35, 0.06), 0 0 1px rgba(28, 31, 35, 0.08);
  --ys-shadow-2: 0 4px 12px rgba(28, 31, 35, 0.08), 0 0 1px rgba(28, 31, 35, 0.08);
  --ys-shadow-3: 0 8px 24px rgba(28, 31, 35, 0.12);
}