@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/InterTight-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/InterTight-600.woff2") format("woff2");
}

:root {
  --font-family-base: "Inter Tight", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 680px;
  --gutter-mobile: 24px;
  --gutter-desktop: 32px;
  --focus-color: #2563eb;
  --shadow-soft: rgba(11, 11, 13, 0.12);
  --shadow-strong: rgba(11, 11, 13, 0.18);
  --radius-pill: 9999px;
  --hero-shift: -6vh;
  --rise-offset: 8px;
  --noise-opacity: 0.035;
  --transition-fast: 180ms;
  --transition-fade: 320ms;
  --transition-entrance: 260ms;
  --transition-entrance-short: 240ms;
  --gap-headline-subtitle: 14px;
  --gap-subtitle-cta: 22px;
  --gap-title-graphic-mobile: 24px;
  --gap-title-graphic-desktop: 28px;
  --gap-graphic-cta-mobile: 26px;
  --gap-graphic-cta-desktop: 30px;
}

body.theme-light {
  color-scheme: light;
  --color-bg: #f7f7f5;
  --color-text-primary: #0b0b0d;
  --color-text-secondary: #6b6b70;
  --color-focus: var(--focus-color);
  --bg-gradient: radial-gradient(circle at 50% 30%, #fbfbf9 0%, #f7f7f5 46%, #f1f1ee 100%);
}

body.theme-dark {
  color-scheme: dark;
  --color-bg: #0b0b0d;
  --color-text-primary: #f7f7f5;
  --color-text-secondary: #9a9aa0;
  --color-focus: var(--focus-color);
  --bg-gradient: radial-gradient(circle at 50% 30%, #141417 0%, #0b0b0d 48%, #070708 100%);
}