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

:root {
  color-scheme: light dark;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --ink: #0b0b0f;
  --ink-2: #5b5b66;
  --line: rgba(11, 11, 15, 0.1);
  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --good: #0a7a43;
  --warn: #a04a06;
  --bad: #c4162d;
  --info: #3b4a8a;
  --good-bg: #e6f6ed;
  --warn-bg: #fdf0df;
  --bad-bg: #fdeaec;
  --info-bg: #eceefa;
  --radius-s: 12px;
  --radius: 20px;
  --radius-l: 28px;
  --shadow: 0 1px 2px rgba(11, 11, 15, 0.04), 0 8px 24px rgba(11, 11, 15, 0.06);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 200ms;
  --t: 320ms;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --fs-hero: clamp(2.5rem, 7vw, 4.5rem);
  --fs-body: 1.0625rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #111114;
    --surface-2: #1b1b20;
    --ink: #f5f5f7;
    --ink-2: #a1a1aa;
    --line: rgba(255, 255, 255, 0.12);
    --accent: #818cf8;
    --accent-ink: #0b0b0f;
    --good: #34d399;
    --warn: #fbbf24;
    --bad: #fb7185;
    --info: #a5b4fc;
    --good-bg: #0d2a1e;
    --warn-bg: #2e2108;
    --bad-bg: #2e1218;
    --info-bg: #1a1d3a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #111114;
  --surface-2: #1b1b20;
  --ink: #f5f5f7;
  --ink-2: #a1a1aa;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #818cf8;
  --accent-ink: #0b0b0f;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --info: #a5b4fc;
  --good-bg: #0d2a1e;
  --warn-bg: #2e2108;
  --bad-bg: #2e1218;
  --info-bg: #1a1d3a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
}

:root {
  --g-bg: #ffffff;
  --g-title: #1a0dab;
  --g-site: #202124;
  --g-url: #4d5156;
  --g-desc: #4d5156;
  --g-line: #dadce0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-bg: #202124;
    --g-title: #8ab4f8;
    --g-site: #e8eaed;
    --g-url: #bdc1c6;
    --g-desc: #bdc1c6;
    --g-line: #3c4043;
  }
}

:root[data-theme="dark"] {
  --g-bg: #202124;
  --g-title: #8ab4f8;
  --g-site: #e8eaed;
  --g-url: #bdc1c6;
  --g-desc: #bdc1c6;
  --g-line: #3c4043;
}