@font-face {
  font-family: "SF Pro Text";
  src: url("sf-pro-text/sf-pro-text_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("sf-pro-text/sf-pro-text_semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("sf-pro-text/sf-pro-text_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("sf-pro-display/SFProDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("sf-pro-display/SFProDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("sf-pro-display/SFProDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-window: #101114;
  --color-window-elevated: rgba(38, 39, 44, 0.72);
  --color-window-strong: rgba(48, 49, 55, 0.86);
  --color-sidebar: rgba(30, 31, 36, 0.66);
  --color-ink: #f5f5f7;
  --color-secondary: #a1a1a6;
  --color-tertiary: #8e8e93;
  --color-separator: rgba(235, 235, 245, 0.16);
  --color-separator-strong: rgba(235, 235, 245, 0.24);
  --color-fill: rgba(235, 235, 245, 0.12);
  --color-fill-hover: rgba(235, 235, 245, 0.18);
  --color-fill-active: rgba(235, 235, 245, 0.24);
  --color-blue: #007aff;
  --color-blue-pressed: #0066d6;
  --color-green: #34c759;
  --color-indigo: #5856d6;
  --color-yellow: #ffcc00;
  --color-orange: #ff9500;
  --color-red: #ff3b30;
  --color-field: #1f8a55;

  --material-glass: rgba(42, 43, 48, 0.58);
  --material-glass-strong: rgba(55, 56, 62, 0.78);
  --material-glass-dark: rgba(31, 33, 38, 0.72);
  --material-stroke: rgba(255, 255, 255, 0.16);
  --material-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

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

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.42), 0 28px 80px rgba(0, 0, 0, 0.34);
  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.32), var(--material-inner);
  --blur-material: saturate(180%) blur(28px);
  --blur-toolbar: saturate(190%) blur(34px);

  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}