/*
 * Wexmoor County: every colour, font, size, space and motion value of the site.
 * site.css and the page sheets only reference these. Prefix --s- (the gallery's own
 * tokens are also loaded for the ribbon).
 *
 * Palette: municipal off-white ground, near-black green ink, petrol (white on it is
 * 6.3:1), deep petrol for the header band, a signage amber used ONLY on the alert icon
 * (never for text), two greys (the dark one is 5.6:1 on the ground), parks green-grey.
 * Budget categories: a petrol-derived family, validated with the dataviz checker (see below).
 */
@font-face {
    font-family: "Overpass";
    src: url("fonts/overpass-latin-var.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Overpass Mono";
    src: url("fonts/overpassmono-latin-var.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- colour ---- */
    --s-ground: #f4f5f2;
    --s-paper: #ffffff;
    --s-ink: #14201f;
    --s-ink-soft: #2c3a39;
    --s-petrol: #0e6a86;
    --s-petrol-deep: #08465a;
    --s-petrol-night: #062f3d;
    --s-petrol-wash: #e1edf0;
    --s-petrol-tint: #c4dde4;
    --s-amber: #f2b230;
    --s-grey: #5a6668;
    --s-grey-line: #cfd6d4;
    --s-grey-faint: #e6e9e6;
    --s-grey-off: #7e898b;   /* inactive letters: 3.3:1 on the ground, quiet but legible */
    --s-park: #c9d8cf;
    --s-park-strong: #9fbcab;
    --s-park-ink: #2f5a45;
    --s-river-line: #5fa3b8;
    --s-water: #d6e6ea;
    --s-land: #fbfbf9;
    --s-on-petrol: #ffffff;
    --s-on-petrol-soft: #cfe3ea;
    --s-board: #3d4a47;
    --s-board-felt: #33403d;
    --s-notice: #fdfcf6;
    --s-notice-2: #f6f8f4;
    --s-pin: #0e6a86;
    --s-pin-shine: #8cc4d5;
    --s-shadow: #0a1a1a2e;
    --s-shadow-deep: #0a1a1a4d;
    --s-scrim: #062f3dcc;
    --s-focus: #0e6a86;
    --s-focus-on-dark: #ffffff;
    --s-selection: #c4dde4;

    /* bin-day zones (map): petrol-family tints, each also labelled with its day */
    --s-zone-mon: #cfe0e6;
    --s-zone-tue: #a9cbd6;
    --s-zone-wed: #dfe7d5;
    --s-zone-thu: #e8e1ef;

    /* budget categories, fixed to the entity, never the rank. One family derived from
       petrol: petrol, deep petrol, river teal, parks green-grey, a blue slate, and one warm
       stone as the single contrast hue. Validated with the dataviz checker on the ground
       for the whole set AND every pair of blocks that touch in the wide and tall treemaps
       (CVD >= 8, normal >= 15). River teal is below 3:1 on the ground: every block carries
       a labelled plate and /budget/ has the full table, which is the relief it requires. */
    --s-cat-safety: #0f84aa;
    --s-cat-roads: #2c4f8c;
    --s-cat-health: #b27439;
    --s-cat-water: #4fc8c3;
    --s-cat-parks: #479b6f;
    --s-cat-other: #667ac2;

    /* ---- type ---- */
    --s-font-ui: "Overpass", "Helvetica Neue", Arial, sans-serif;
    --s-font-mono: "Overpass Mono", "SFMono-Regular", Menlo, monospace;
    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-semi: 600;
    --s-weight-bold: 700;
    --s-weight-black: 800;
    --s-size-hero: clamp(2.6rem, 1.2rem + 4.2vw, 5.1rem);
    --s-size-h2: clamp(2rem, 1.3rem + 2.2vw, 3.2rem);
    --s-size-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --s-size-h4: 0.8125rem;
    --s-size-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --s-size-body: 1.0625rem;
    --s-size-small: 0.9375rem;
    --s-size-tiny: 0.8125rem;
    --s-size-micro: 0.75rem;
    --s-size-input: 1.25rem;
    --s-size-input-sm: 1.0625rem;
    --s-size-tile: 1.0625rem;
    --s-size-date: clamp(6rem, 4rem + 7vw, 10.5rem);
    --s-size-figure: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
    --s-size-plate: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --s-size-brand: 1.25rem;
    --s-leading-solid: 0.92;
    --s-leading-tight: 1.05;
    --s-leading-head: 1.15;
    --s-leading-ui: 1.3;
    --s-leading-body: 1.55;
    --s-track-display: -0.025em;
    --s-track-h2: -0.015em;
    --s-track-caps: 0.09em;
    --s-track-mono: 0.02em;
    --s-measure: 62ch;
    --s-measure-lede: 46ch;
    --s-measure-notice: 34ch;

    /* map type, in viewBox units */
    --s-map-town: 15px;
    --s-map-town-seat: 17px;
    --s-map-label: 11px;
    --s-map-shield: 11px;
    --s-map-river: 12px;
    --s-map-day: 12px;

    /* ---- space ---- */
    --s-gutter: clamp(16px, 4vw, 48px);
    --s-max: 1320px;
    --s-section: clamp(64px, 8vw, 120px);
    --s-space-1: 4px;
    --s-space-2: 8px;
    --s-space-3: 12px;
    --s-space-4: 16px;
    --s-space-5: 24px;
    --s-space-6: 32px;
    --s-space-7: 48px;
    --s-space-8: 64px;
    --s-space-9: 96px;
    --s-head-h: 68px;
    --s-head-h-sm: 58px;
    --s-touch: 44px;
    --s-btn-h: 52px;
    --s-search-h: 68px;
    --s-search-h-sm: 56px;
    --s-tile-h: 104px;
    --s-tile-h-sm: 62px;
    --s-tile-sq: 40px;
    --s-mark: 40px;
    --s-mark-sm: 34px;
    --s-icon: 22px;
    --s-icon-sm: 18px;
    --s-radius: 4px;
    --s-radius-sm: 2px;
    --s-rule: 1px;
    --s-rule-strong: 2px;
    --s-plate-border: 3px;
    --s-pin-size: 18px;
    --s-tree-h: 440px;
    --s-tree-h-tall: 620px;
    --s-tree-gap: 2px;
    --s-bar-h: 8px;
    --s-gauge-h: 240px;
    --s-card-w: 300px;

    /* treemap frames: wide is width/height, tall is height/width (lib/budget.php) */
    --s-treemap-aspect-wide: 2.1;
    --s-treemap-aspect-tall: 1.6;

    /* notice board */
    --s-tilt-1: -1.4deg;
    --s-tilt-2: 0.9deg;
    --s-tilt-3: -0.5deg;
    --s-shadow-notice: 0 1px 0 var(--s-shadow), 0 10px 22px var(--s-shadow-deep);
    --s-shadow-card: 0 1px 0 var(--s-grey-line), 0 14px 32px var(--s-shadow);
    --s-shadow-lift: 0 2px 0 var(--s-grey-line), 0 18px 36px var(--s-shadow);

    /* ---- motion ---- */
    --s-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --s-ease-drop: cubic-bezier(0.3, 1.45, 0.5, 1);
    --s-dur-fast: 160ms;
    --s-dur: 280ms;
    --s-dur-slow: 640ms;
    --s-dur-grow: 900ms;
    --s-dur-alert: 520ms;
    --s-dur-drop: 560ms;
    --s-dur-pulse: 1800ms;
    --s-stagger: 70ms;
    --s-stagger-block: 90ms;
    --s-type-char: 55ms;
    --s-type-erase: 28ms;
    --s-type-hold: 1700ms;
    --s-type-gap: 380ms;
    --s-drop-from: -26px;
    --s-lift: -2px;
    --s-nudge: 4px;
    --s-reveal-shift: 18px;
    --s-reveal-threshold: 0.18;
    --s-search-debounce: 90ms;
    --s-results-max: 6;

    /* breakpoints: JS reads these; CSS media queries repeat the same numbers */
    --s-bp-wide: 1080;
    --s-bp-phone: 719;

    /* media queries JS reads (CSS repeats the same numbers) */
    --s-mq-reduce: (prefers-reduced-motion: reduce);
    --s-mq-phone: (max-width: 719px);
    --s-mq-wide: (min-width: 1080px);

    /* home first screen */
    --s-hero-pad-top: clamp(32px, 5vh, 48px);
    --s-hero-pad-bottom: clamp(28px, 4vh, 48px);
    --s-hero-gap: clamp(28px, 3.4vw, 56px);
    --s-hero-map-w: minmax(0, 0.7fr);
    --s-size-hero-task: clamp(2.2rem, 1rem + 3.4vw, 4.25rem);
    --s-size-hero-task-sm: 2.25rem;
    --s-tile-gap: 10px;
    --s-tile-line: 0.8125rem;
    --s-board-pad: clamp(28px, 4vw, 56px);
    --s-notice-pin: 16px;
    --s-stamp-tilt: -4deg;
    --s-dateplate-w: clamp(220px, 22vw, 300px);
    --s-atlas-side: minmax(260px, 0.38fr);
    --s-mode-h: 56px;
    --s-type-start: 600ms;
    --s-type-notice: 16ms;
    --s-results-gap: 6px;

    /* sub-pages */
    --s-page-head-pad: clamp(20px, 3vw, 40px);
    --s-letter-w: 36px;
    --s-step-w: 640px;
    --s-option-h: 76px;
    --s-video-ratio: 16 / 9;
    --s-gauge-w: 640;
    --s-gauge-hh: 240;
    --s-bar-h-lg: 14px;
    --s-income-h: 28px;
    --s-vote-h: 12px;

    /* page-head artefacts: the right-hand plate every main inner page carries */
    --s-head-aside-w: minmax(300px, 0.62fr);
    --s-route-node: 40px;
    --s-route-line: 6px;
    --s-route-col: minmax(280px, 0.42fr);
    --s-minitree-h: 112px;
    --s-barrier-board-h: 30px;
    --s-barrier-stripe: 22px;
    --s-barrier-legs-h: 58px;
    --s-barrier-swing: -3deg;
    --s-dur-settle: 1100ms;

    /* income sources (budget page): one petrol ramp, darkest = largest */
    --s-inc-0: #08465a;
    --s-inc-1: #0e6a86;
    --s-inc-2: #3f8ea6;
    --s-inc-3: #7fb5c6;
    --s-inc-4: #b9d6df;
    --s-vote-for: #0e6a86;
    --s-vote-against: #14201f;
    --s-vote-abstain: #cfd6d4;
    --s-gauge-warn: #e8e1ef;
    --s-slip-rule: #c4dde4;
    --s-chamber-wall: #dfe8e9;
    --s-chamber-floor: #eef1ee;
    --s-chamber-wood: #b9a98c;
    --s-chamber-wood-dark: #8d7d61;
    --s-dur-draw: 1600ms;
    --s-dur-live: 2400ms;
    --s-crumb-gap: 6px;
}