@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: var(--line-height);
    color: var(--color-ink);
    background-color: var(--color-canvas);
  }

  /* Typography */
  h1, h2, h3, h4 {
    line-height: var(--line-height-tight);
    font-weight: 600;
  }

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-large); }
  h3 { font-size: var(--text-medium); }
  h4 { font-size: var(--text-normal); }

  p + p {
    margin-block-start: var(--block-space);
  }

  strong, b {
    font-weight: 600;
  }

  small {
    font-size: var(--text-small);
  }

  /* Links */
  a:not([class]) {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  a:not([class]):hover {
    color: var(--color-link-hover);
  }

  /* Focus styles */
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Turbo Frames should not affect layout */
  turbo-frame {
    display: contents;
  }

  /* Scrollbar styling for dark mode compatibility */
  @supports (scrollbar-color: auto) {
    * {
      scrollbar-color: oklch(var(--lch-ink-light)) transparent;
      scrollbar-width: thin;
    }
  }

  /* Selection */
  ::selection {
    background-color: oklch(var(--lch-ink-light) / 0.3);
  }

  /* Prevent horizontal overflow */
  html {
    overflow-x: hidden;
  }
}