@font-face { font-family: Satoshi; font-weight: 400; font-display: swap; src: url('/fonts/Satoshi-Regular.otf') format('opentype'); }
@font-face { font-family: Satoshi; font-weight: 500; font-display: swap; src: url('/fonts/Satoshi-Medium.otf') format('opentype'); }
@font-face { font-family: Satoshi; font-weight: 700; font-display: swap; src: url('/fonts/Satoshi-Bold.otf') format('opentype'); }

:root {
  --grey-25: #fcfcfd;
  --grey-50: #f9fafb;
  --grey-75: #f1f4f6;
  --grey-100: #e9ebee;
  --grey-200: #c9ced4;
  --grey-300: #a9b0ba;
  --grey-400: #8a93a0;
  --grey-500: #6c7684;
  --grey-600: #5b6470;
  --grey-700: #4a515c;
  --grey-800: #393f48;
  --grey-900: #282d33;
  --grey-950: #17191c;
  --accent-50: #f0faff;
  --accent-100: #d1eeff;
  --accent-200: #93d1ff;
  --accent-300: #55b0ff;
  --accent-400: #1789ff;
  --accent-500: #0060d8;
  --accent-600: #004bbe;
  --accent-700: #0039a4;
  --accent-800: #00298a;
  --accent-900: #001b70;
  --white: #ffffff;
  --measure: 66ch;
  --shadow-xs: 0px 1px 2px rgba(23, 25, 28, 0.04), 0px 2px 4px rgba(23, 25, 28, 0.04);
  --shadow-sm: 0px 2px 6px rgba(23, 25, 28, 0.04), 0px 8px 20px rgba(23, 25, 28, 0.06);
  --shadow-md: 0px 4px 10px rgba(23, 25, 28, 0.05), 0px 14px 32px rgba(23, 25, 28, 0.08);
  --shadow-lg: 0px 6px 14px rgba(23, 25, 28, 0.06), 0px 22px 48px rgba(23, 25, 28, 0.10);
  --shadow-xl: 0px 12px 24px rgba(23, 25, 28, 0.10), 0px 32px 64px rgba(23, 25, 28, 0.16);
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 56px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --type-caption-size: 12px;
  --type-caption-line: 19px;
  --type-caption-weight: 400;
  --type-label-size: 12px;
  --type-label-line: 19px;
  --type-label-weight: 500;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 22px;
  --type-body-sm-weight: 400;
  --type-body-sm-strong-size: 14px;
  --type-body-sm-strong-line: 22px;
  --type-body-sm-strong-weight: 500;
  --type-body-size: 16px;
  --type-body-line: 25px;
  --type-body-weight: 400;
  --type-body-strong-size: 16px;
  --type-body-strong-line: 25px;
  --type-body-strong-weight: 500;
  --type-subtitle-size: 18px;
  --type-subtitle-line: 28px;
  --type-subtitle-weight: 500;
  --type-title-size: 20px;
  --type-title-line: 28px;
  --type-title-weight: 700;
  --type-heading-size: 24px;
  --type-heading-line: 34px;
  --type-heading-weight: 700;
  --type-display-size: 30px;
  --type-display-line: 36px;
  --type-display-weight: 700;
  --color-canvas: #f1f4f6;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f9fafb;
  --color-border: #c9ced4;
  --color-border-strong: #a9b0ba;
  --color-text-primary: #282d33;
  --color-text-secondary: #5b6470;
  --color-text-tertiary: #6c7684;
  --color-text-inverse: #ffffff;
  --color-accent: #0060d8;
  --color-accent-pressed: #0039a4;
  --color-accent-text: #ffffff;
  --color-accent-surface: #f0faff;
  --color-accent-border: #93d1ff;
  --color-danger: #b3261e;
  --color-danger-pressed: #901411;
  --color-danger-text: #ffffff;
  --color-danger-surface: #fff4f0;
  --color-skeleton: #e9ebee;
  --color-scrim: rgba(23, 25, 28, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
  --color-canvas: #17191c;
  --color-surface: #282d33;
  --color-surface-raised: #393f48;
  --color-surface-sunken: #17191c;
  --color-border: #393f48;
  --color-border-strong: #4a515c;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #a9b0ba;
  --color-text-tertiary: #8a93a0;
  --color-text-inverse: #17191c;
  --color-accent: #55b0ff;
  --color-accent-pressed: #93d1ff;
  --color-accent-text: #17191c;
  --color-accent-surface: rgba(85, 176, 255, 0.14);
  --color-accent-border: rgba(85, 176, 255, 0.32);
  --color-danger: #eb7865;
  --color-danger-pressed: #f8a997;
  --color-danger-text: #17191c;
  --color-danger-surface: rgba(221, 68, 52, 0.14);
  --color-skeleton: #393f48;
  --color-scrim: rgba(0, 0, 0, 0.6);
  }
}