/* ==========================================================================
   Tiverton Strategic Plan's theme: its colours, from the draft plan document (gold, blue-grey
   and light grey), its font, corners and shadow, and the town's skyline. The CMS's site.css
   reads these by name.
   ========================================================================== */

:root {
    /* The three plan colours: the gold (the accent, one step deeper than the document's
       #b2a336), the blue-grey (dark: the words, and the dark panels and buttons) and the light grey. */
    --accent: #9a8c2b;
    --dark: #404653;
    --grey-300: #b4b9be;

    /* Supporting tints and shades, also taken from the document */
    --accent-deep: #857925;     /* the gold's hover state */
    --accent-text: #7f7521;     /* gold for small text on white, or behind small white text: 4.7:1 */
    --highlight: #dcd95f;       /* the yellow: buttons and highlighted text blocks only, with --dark-deep text */
    --highlight-deep: #bebc52;  /* the yellow's hover state */
    --dark-deep: #2f3440;       /* hover states */
    --dark-soft: #5d5e6a;       /* secondary text */
    --tint: #c0d0d6;            /* pale blue-grey panels */
    --grey-100: #eef0f0;
    --grey-200: #e5e8ea;
    --white: #ffffff;
    --focus: #ffbf47;
    --error: #b3261e;
    --error-on-dark: #ffb4ab;   /* an error on a dark panel */

    --radius: 4px;
    --shadow: 0 6px 18px rgb(47 52 64 / 0.12);

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

    /* The drawings: the town's skyline above the footer, and its wave alone under a photo. */
    --skyline: url("/images/skyline.svg");
    --skyline-wave: url("/images/skyline-wave.svg");
}