/* ldu/base.css: the document layer in the LDU look (slice 1).

   Element selectors only (specificity 0,0,1 or a bare pseudo), so a class in comms/* or fraction-ds always wins; this
   only styles what nothing styled. Colours and sizes are all var() from vendor/fraction-ds/css/tokens.css and
   ldu/tokens.css. Body font, size and line-height are left to fraction-ds (the same values), and the reduced-motion
   rule stays in vendor/fraction-ds/css/base.css. */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

/* keyboard focus is always visible, one ring for everything */
:focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-offset);
}

::selection {
  background: var(--select-bg);
  color: var(--select-ink);
}

/* the hover contract: colour, background or border, 150ms, never lift or shadow.
   Rules in comms/* set the hover colours; this makes them ease in. */
a, button, [role="button"], summary {
  transition: color var(--dur), background-color var(--dur), border-color var(--dur);
}

/* Scrollbars, the platform default (Milan, 3 Nov: the client card's quiet bar "as the default styling for these scroll indicators"): a 4px
   rounded --ink-4 bar on a faint track. fraction-ds colours every scrollbar with scrollbar-color, and Chrome then ignores the drawn
   ::-webkit-scrollbar, so it is reset to auto where the drawn one is supported; Firefox gets the same colours. A scroll area hidden on
   purpose (scrollbar-width: none, or ::-webkit-scrollbar display: none on a class) stays hidden. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--ink-4) color-mix(in srgb, var(--line) 50%, transparent); }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { border: 4px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--line) 50%, transparent) padding-box; }
::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 999px; background: var(--ink-4) padding-box; }
::-webkit-scrollbar-corner { background: transparent; }