/* 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.

   What every block does, so they sit together as one site:
   - Lives in its own folder, /blocks/<name>block/, and its partial links that folder's stylesheet
     (and script) itself, once per page. Copying the folder and the partial is the whole install;
     the layout links only this file.
   - Paints var(--block-bg, var(--block-panel-bg)). An author's colour when one was chosen, white
     otherwise -- never transparent, which would put this dark ink on a dark site.
   - Pads top and bottom with --block-pad-y (--block-pad-y-sm when stacked) and spaces its columns
     with --block-gutter.
   - Has an Anchor field (25% wide in the editor) whose value is the id of its outermost element,
     written only when set, so /page#anchor scrolls to the block.
   - Stacks to one column at 900px and below. A media query cannot read a custom property, so this
     one is a convention rather than a token: use (max-width: 900px). */
: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;
    /* The space between items side by side in a Content Container: tighter than the gutter, so a
       row of panels reads as one group. */
    --block-item-gap: 20px;
}