/* ==========================================================================
   The CMS's base (the themes plan, phase 3): the names site.css reads for its colours, font,
   corners and drawings, with the CMS's own plain values, which a site has until it has a theme.
   Every page loads it first, then the site's theme.css, which gives any of them its own value: a
   theme that names only a few changes only those. A library's names for its own parts start from
   these, at the top of its own stylesheet (Have your say's listen.css), where a theme may set them
   too.
   ========================================================================== */

:root {
    /* The colours, named for their use. */
    --accent: #2f6a8a;          /* links, stripes and the marks of the site */
    --accent-deep: #255670;     /* the accent's hover state */
    --accent-text: #255670;     /* the accent for small text on white */
    --dark: #2b3038;            /* the words, and the dark panels and buttons */
    --dark-deep: #1c2026;       /* hover states */
    --dark-soft: #555c67;       /* secondary text */
    --highlight: #f2d46b;       /* buttons and highlighted blocks only, with --dark-deep text */
    --highlight-deep: #dcbd4f;  /* the highlight's hover state */
    --tint: #d6e2e9;            /* pale panels */
    --grey-100: #f0f1f2;
    --grey-200: #e4e6e8;
    --grey-300: #b6bac0;
    --white: #ffffff;
    --focus: #ffbf47;
    --error: #b3261e;
    --error-on-dark: #ffb4ab;   /* an error on a dark panel */

    --radius: 4px;
    --shadow: 0 6px 18px rgb(28 32 38 / 0.12);

    --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* The drawings: low hills above the footer, and under a photo. */
    --skyline: url("/theme/hills.svg");
    --skyline-wave: url("/theme/hills.svg");
}