@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sb-public-bg: #f6f4ef;
  --sb-app-bg: #07090d;

  --sb-surface-1: #0f1318;
  --sb-surface-2: #141a22;
  --sb-surface-3: #1f2733;

  --sb-text-primary: #e8edf2;
  --sb-text-secondary: #93a1b0;

  --sb-public-text: #0b0d0f;
  --sb-public-muted: #5f666d;

  --sb-lime: #c6f24e;
  --sb-lime-hover: #b8e43f;
  --sb-lime-active: #a8d32f;
  --sb-lime-ink: #0c1400;

  --sb-success: #78c442;
  --sb-warning: #f2b72f;
  --sb-danger: #e5483f;

  --sb-border-dark: rgba(255, 255, 255, 0.1);
  --sb-border-light: rgba(11, 13, 15, 0.12);

  --sb-radius-sm: 8px;
  --sb-radius-md: 12px;
  --sb-radius-lg: 16px;
  --sb-radius-xl: 24px;
  --sb-radius-pill: 999px;

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

  --sb-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --sb-shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.12);

  --sb-font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --sb-display-size: clamp(3rem, 13vw, 4.5rem);
  --sb-display-line-height: 0.98;
  --sb-display-weight: 800;
  --sb-display-tracking: -0.055em;

  --sb-title-xl-size: 2rem;
  --sb-title-xl-line-height: 1.12;
  --sb-title-xl-weight: 750;
  --sb-title-xl-tracking: -0.035em;

  --sb-title-lg-size: 1.375rem;
  --sb-title-lg-line-height: 1.25;
  --sb-title-lg-weight: 700;
  --sb-title-lg-tracking: -0.025em;

  --sb-title-md-size: 1.0625rem;
  --sb-title-md-line-height: 1.3;
  --sb-title-md-weight: 650;
  --sb-title-md-tracking: -0.015em;

  --sb-body-lg-size: 1.0625rem;
  --sb-body-lg-line-height: 1.55;
  --sb-body-lg-weight: 450;

  --sb-body-md-size: 0.9375rem;
  --sb-body-md-line-height: 1.5;
  --sb-body-md-weight: 450;

  --sb-body-sm-size: 0.8125rem;
  --sb-body-sm-line-height: 1.4;
  --sb-body-sm-weight: 450;

  --sb-label-size: 0.75rem;
  --sb-label-line-height: 1.3;
  --sb-label-weight: 600;
  --sb-label-tracking: 0;

  --sb-button-size: 0.9375rem;
  --sb-button-line-height: 1;
  --sb-button-weight: 650;
  --sb-button-tracking: -0.01em;

  --sb-money-xl-size: 2rem;
  --sb-money-xl-line-height: 1;
  --sb-money-xl-weight: 700;
  --sb-money-xl-tracking: -0.035em;

  --sb-money-md-size: 1rem;
  --sb-money-md-line-height: 1.2;
  --sb-money-md-weight: 650;

  --sb-mobile-width: 390px;
  --sb-page-gutter: 20px;
  --sb-page-gutter-compact: 16px;
  --sb-section-gap: 32px;
  --sb-content-gap: 16px;
  --sb-control-height: 52px;
  --sb-control-height-lg: 56px;
  --sb-tap-target: 44px;
  --sb-bottom-nav-height: 76px;
  --sb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sb-header-height: 64px;

  --sb-icon-xs: 16px;
  --sb-icon-sm: 20px;
  --sb-icon-md: 24px;
  --sb-icon-lg: 32px;
  --sb-icon-xl: 40px;
  --sb-icon-stroke: 2;
  --sb-icon-stroke-alt: 1.75;
  --sb-icon-primary: var(--sb-text-primary);
  --sb-icon-secondary: var(--sb-text-secondary);
  --sb-icon-accent: var(--sb-lime);
  --sb-icon-success: var(--sb-success);
  --sb-icon-warning: var(--sb-warning);
  --sb-icon-danger: var(--sb-danger);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sb-font-family);
}

.sb-money {
  font-variant-numeric: tabular-nums;
}