/**
 * @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);
  }
}