@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Variable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --color-ink: #12131A;
  --color-ink-soft: #4A4B57;
  --color-paper: #FAF9F6;
  --color-paper-alt: #F1EFE9;
  --color-indigo-900: #12183F;
  --color-indigo-700: #232E9E;
  --color-indigo-600: #303FCB;
  --color-amber-500: #D69A2D;
  --color-line: #E3E0D6;
  --color-line-dark: rgba(255, 255, 255, 0.16);
  --color-success: #1E7B4D;
  --color-error: #B3261E;
  --color-focus-ring: #303FCB;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Space Grotesk", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --font-size-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --font-size-base: clamp(1rem, 0.97rem + 0.2vw, 1.05rem);
  --font-size-lg: clamp(1.15rem, 1.1rem + 0.25vw, 1.25rem);
  --font-size-xl: clamp(1.35rem, 1.28rem + 0.4vw, 1.6rem);
  --font-size-2xl: clamp(1.6rem, 1.45rem + 0.7vw, 2.1rem);
  --font-size-3xl: clamp(1.85rem, 1.6rem + 1.1vw, 2.65rem);
  --font-size-4xl: clamp(2.1rem, 1.75rem + 1.6vw, 3.4rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 88px;
  --content-max: 1200px;
  --shell-max: 1440px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 30px rgba(18, 24, 63, 0.1);
  --header-height: 76px;
}

[data-surface="dark"] {
  --color-ink: #F5F3EE;
  --color-ink-soft: #C7C6D6;
  --color-paper: var(--color-indigo-900);
  --color-line: var(--color-line-dark);
  --color-focus-ring: #D69A2D;
  color: var(--color-ink);
  background: var(--color-paper);
}