/* css/base.css */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(
      1200px 600px at 15% 0%,
      rgba(24, 174, 243, 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 85% 12%,
      rgba(25, 111, 151, 0.14),
      transparent 58%
    ),
    var(--bg);
  color: var(--text);
  font-weight: 500;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

/* Selection */
::selection {
  background: rgba(24, 174, 243, 0.25);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(24, 174, 243, 0.55);
  outline-offset: 3px;
  border-radius: 12px;
}

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

/* Sections */
.section {
  padding: 34px 0;
}

/* Simple headings */
h1,
h2,
h3 {
  margin: 0 0 10px;
  font-weight: 700;
}
p {
  margin: 0;
  line-height: 1.7;
  color: var(--muted);
}

/* Scrollbar (nice glass) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar-thumb {
  background: rgba(227, 239, 244, 0.16);
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(11, 24, 29, 0.18);
}