:root {
  /* Palette */
  --color-ink: #0c1220;
  --color-ink-soft: #495169;
  --color-cloud: #f6f8fb;
  --color-card: #ffffff;
  --color-line: #e3e7f0;
  --color-accent: #1c7ed6;
  --color-accent-strong: #1864ab;
  --color-accent-soft: #e2ecfa;

  color-scheme: light;

  /* Typography */
  --font-base: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --line-height: 1.55;

  /* Layout */
  --radius-sm: 14px;
  --radius-md: 22px;
  --shadow-sm: 0 10px 25px rgba(11, 14, 25, 0.08);
  --shadow-card: 0 20px 55px rgba(5, 13, 46, 0.08);
  --container: 1080px;

  --space-2: 0.45rem;
  --space-3: 0.7rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2.2rem;
  --space-10: 2.8rem;
  --space-12: 3.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: radial-gradient(circle at top, rgba(28, 126, 214, 0.08), transparent 55%),
    var(--color-cloud);
  line-height: var(--line-height);
  letter-spacing: -0.01em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-color: rgba(28, 126, 214, 0.55);
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-color: rgba(28, 126, 214, 0.9);
}

:focus-visible {
  outline: 3px solid rgba(28, 126, 214, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(var(--container), calc(100% - 2 * var(--space-6)));
  margin-inline: auto;
}