@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  :where(:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer base {
  @font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  }

  @font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  }

  html {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    font-feature-settings: "cv11", "ss01", "ss03";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }

  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3, h4 {
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  h4 { font-size: var(--text-md); }

  p {
    line-height: var(--leading-relaxed);
    color: var(--color-fg);
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-out);
  }

  a:hover { color: var(--color-accent-hover); text-decoration: underline; }

  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  code {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    padding: 0.1em 0.35em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-12) 0;
  }

  strong { color: var(--color-fg); font-weight: 600; }

  ::selection {
    background: var(--color-accent);
    color: var(--color-bg);
  }

  @media print {
    .site-nav, .site-footer { display: none !important; }
    html, body { background: #fff; color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: underline; }
    .page { padding: 1rem; display: block; }
  }
}