/* The shared look of every block: one place to set the title font and size, the text, the rules
   and the button, so the CTA, the accordion and whatever comes next all agree.

   Tokens only -- no selectors but :root. Link it in the layout before the blocks' own stylesheets
   (a <link>, not an @import, so it downloads in parallel and asp-append-version busts its cache).
   Each block reads a token with its own fallback -- var(--block-title-size, ...) -- so a block
   copied into a site without this file still renders; with it, change a value here and every
   block follows. Override any token per site in that site's stylesheet, or per block by setting it
   on the block's class.

   Colours are fixed dark ink rather than the site's --ink: blocks paint their own light background
   (--block-bg), so they must not flip to light text when the site goes dark. */
:root {
    /* Titles -- a block's h2. A section title, never a page title: 36px at most, so the page's
       h1 always outranks it; 24px on a phone. */
    --block-title-font: Georgia, "Times New Roman", serif;
    --block-title-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    --block-title-weight: 700;
    --block-title-line: 1.15;

    /* The small uppercase label above a title. */
    --block-label-size: 0.875rem;
    --block-label-weight: 700;
    --block-label-tracking: 0.12em;

    /* Body copy -- descriptions and introductions. The font is the site's (inherited). */
    --block-body-size: 1.0625rem;
    --block-body-line: 1.75;

    /* Colours. */
    --block-ink: #1a1a1a;
    --block-rule: rgba(0, 0, 0, 0.16);
    --block-rule-strong: #1a1a1a;
    --block-ink-muted: #6b7280;
    /* Keyboard focus ring, on every block's interactive parts. */
    --block-focus: #1a1a1a;

    /* Panels -- boxed pieces inside a block, like an accordion item: a light head over a white
       body, with a hairline border. */
    --block-radius: 6px;
    --block-panel-bg: #fff;
    --block-panel-head-bg: #f9fafb;
    --block-panel-head-bg-hover: #f1f3f5;
    --block-panel-border: #d1d5db;

    /* Buttons. */
    --block-button-bg: #111;
    --block-button-bg-hover: #333;
    --block-button-ink: #fff;
    --block-button-size: 0.9375rem;
    --block-button-tracking: 0.12em;

    /* Spacing: above and below a block, and the gutter between its two columns. */
    --block-pad-y: 64px;
    --block-pad-y-sm: 40px;
    --block-gutter: 56px;
}