/*
  Base: element defaults and typography from tokens. Element selectors only — any
  class belongs in components.css, patterns.css, pages.css, or utilities.css.
*/
@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
    scroll-padding-bottom: calc(var(--control-lg) + var(--space-8));
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: var(--text-md);
    color: var(--color-text);
    background: var(--color-canvas);
    /* A word longer than its line breaks instead of running off the page. */
    overflow-wrap: break-word;
  }

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: var(--space-0) var(--space-0) var(--space-3);
    color: var(--color-text);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-title);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
  }

  h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
  }

  h5,
  h6 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
  }

  p {
    margin: var(--space-0) var(--space-0) var(--space-4);
    text-wrap: pretty;
  }

  p:last-child {
    margin-bottom: var(--space-0);
  }

  ul,
  ol {
    margin: var(--space-0) var(--space-0) var(--space-4);
    padding-inline-start: var(--space-6);
  }

  /* Lists used for layout (cards, rails, nav) opt out of bullets and indentation. */
  :where(ul, ol)[role="list"] {
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  dl {
    margin: var(--space-0) var(--space-0) var(--space-4);
  }

  dt {
    font-weight: var(--weight-semibold);
  }

  dd {
    margin: var(--space-0) var(--space-0) var(--space-2);
  }

  a {
    color: var(--color-text-link);
    text-decoration: none;
    text-underline-offset: var(--underline-offset);
  }

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

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

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

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: var(--text-relative-sm);
  }

  code {
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-xs);
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  hr {
    margin: var(--space-6) var(--space-0);
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border);
  }

  label {
    display: inline-block;
  }

  ::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
  }

  :disabled {
    cursor: not-allowed;
  }

  /* One focus style for the whole product: a 2px accent outline offset from the control.
     Outlines (never box-shadow rings) survive forced-colors mode. */
  :focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  /* <main tabindex="-1"> is only a focus target for the skip link; it is not a control. */
  main:focus-visible {
    outline: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}