/**
 * @file
 * Element-level defaults for the druid theme.
 *
 * Bare element selectors only (body, headings, links, lists, etc.). For
 * discrete UI components, see css/components/. For page-level structure,
 * see css/layout.css. Every rule lives in the `base` cascade layer so it
 * loses cleanly to anything in layout / components / utilities.
 */
@layer base {
  body {
    background: var(--surface-1);
    color: var(--text-1);
    font-family: var(--font-sans);
    line-height: var(--font-lineheight-3);
  }

  /* Headings use the serif token (Adelle). Drupal core inserts <h1>–<h6>
     in unpredictable places (admin toolbars, contextual links, system
     blocks), so this targets bare heading elements — re-declare in a
     component or utility if a specific UI surface needs the sans family. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-serif);
    line-height: var(--font-lineheight-1);
    margin-block: var(--size-3);
  }
  h1 {
    font-size: var(--font-size-6);
  }
  h2 {
    font-size: var(--font-size-5);
  }
  h3 {
    font-size: var(--font-size-4);
  }
  h4 {
    font-size: var(--font-size-3);
  }
  h5 {
    font-size: var(--font-size-2);
  }
  h6 {
    font-size: var(--font-size-1);
  }

  a {
    color: var(--brand);
  }
}