/* ════════════════════════════════════════════════════════════════════
   BASE.CSS — Global defaults for typography, body, links, headings
   Applied once, inherited everywhere. No component styles here.
   ════════════════════════════════════════════════════════════════════ */

@layer global {

  html {
    scroll-padding-block-start: calc(var(--header-height) + var(--space-m));
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-body);
    background-color: var(--surface-page);
  }


  /* ── Headings ─────────────────────────────────────────────────── */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-heading);
  }

  h1 { font-size: var(--heading-2xl); }
  h2 { font-size: var(--heading-xl); }
  h3 { font-size: var(--heading-l); }
  h4 { font-size: var(--heading-m); }
  h5 { font-size: var(--heading-s); }
  h6 { font-size: var(--heading-xs); }


  /* ── Body text ────────────────────────────────────────────────── */

  p {
    max-inline-size: var(--text-width-m);
  }

  strong, b {
    font-weight: var(--weight-semibold);
  }

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


  /* ── Links ────────────────────────────────────────────────────── */

  a:not([class]) {
    color: var(--text-link);
    text-underline-offset: var(--underline-offset-m);
    transition: color var(--duration-fast) var(--ease-default);
  }

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

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


  /* ── Selection ────────────────────────────────────────────────── */

  ::selection {
    background-color: var(--primary);
    color: var(--text-on-primary);
  }


  /* ── Scrollbar (subtle, brand-tinted) ─────────────────────────── */

  ::-webkit-scrollbar {
    inline-size: 0.5rem;
  }

  ::-webkit-scrollbar-track {
    background: var(--surface-page);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--neutral-semi-light);
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-semi-dark);
  }

}