/* ========================================================================== EZRRC design tokens -------------------------------------------------------------------------- Every colour is a SPACE-SEPARATED RGB TRIPLET, following the THEME.md pattern from DynamoMap, so opacity modifiers work anywhere: color: rgb(var(--color-ink)); border-color: rgb(var(--color-ink) / .12); The hex is kept in a comment beside each value. Nothing outside this file may contain a colour literal (docs/CONTRACTS.md ground rule 4). The one exception is MapLibre paint properties, which are renderer paint rather than theme colour and are declared in static/js/site.js. PALETTE RATIONALE The brand mark is a survey square split at a horizon: section lines above, strata below. The palette is the ink set of a printed topographic sheet -- survey blue for structure and interaction, brass for position markers, verdigris for "current", oxide for "stale", iron red for failure. Blue is the only interactive colour; brass never means "click here", it means "you are here". Keeping that split is what stops the page reading as a dashboard. THEME SWITCHING Light lives in :root. Dark is declared twice on purpose: 1. under prefers-color-scheme, excluded when the reader has forced light 2. under [data-theme="dark"], which wins over the media query so an explicit choice beats the system setting in both directions. --color-faint IS NOT A TEXT COLOUR. It sits around 3.2:1 on the page ground, which is enough for a hairline, a ruler tick, a breadcrumb slash or a disabled glyph, and not enough for anything a reader has to read. Every count, caption, byte span and helper sentence uses --color-muted, which clears 4.5:1 in both themes. If a new rule needs "quieter than muted" for words, the answer is smaller weight or more space, not less contrast: people make financial decisions off these numbers. ========================================================================== */ :root { color-scheme: light; /* -- Surfaces --------------------------------------------------------- */ --color-paper: 244 246 248; /* #F4F6F8 page ground, drafting stock */ --color-canvas: 255 255 255; /* #FFFFFF cards, panels, table body */ --color-canvas-sunk: 237 241 245; /* #EDF1F5 wells, zebra rows, code bg */ --color-canvas-raised: 255 255 255; /* #FFFFFF popovers, sticky header */ /* -- Type ------------------------------------------------------------- */ --color-ink: 15 58 92; /* #0F3A5C headings and the brand mark */ --color-text: 27 41 52; /* #1B2934 body copy */ --color-muted: 88 106 121; /* #586A79 secondary copy, 4.7:1 on paper */ --color-faint: 122 139 152; /* #7A8B98 RULES AND TICKS ONLY -- see below */ --color-inverse: 246 250 253; /* #F6FAFD text on a filled dark button */ /* -- Interaction (blue is the only clickable colour) ------------------ */ --color-accent: 11 90 138; /* #0B5A8A links, primary buttons, 7.4:1 */ --color-accent-strong: 8 68 105; /* #084469 hover and pressed */ --color-accent-soft: 226 238 246; /* #E2EEF6 active nav, selected facet */ --color-accent-line: 154 190 214; /* #9ABED6 border on a soft accent fill */ /* -- Position marker (brass; never a link) ---------------------------- */ --color-marker: 132 97 10; /* #84610A marker text, 5.7:1 on canvas */ --color-marker-bright: 201 162 39; /* #C9A227 ruler ticks, fills, the mark */ --color-marker-soft: 250 243 224; /* #FAF3E0 highlighted byte span */ /* -- Status ----------------------------------------------------------- */ --color-fresh: 21 104 82; /* #156852 verdigris: current, ready */ --color-fresh-soft: 224 240 235; /* #E0F0EB */ --color-caution: 145 71 26; /* #91471A oxide: stale, partial */ --color-caution-soft: 250 238 228; /* #FAEEE4 */ --color-danger: 155 40 40; /* #9B2828 iron red: failed, destructive */ --color-danger-soft: 250 232 232; /* #FAE8E8 */ --color-info: 11 90 138; /* #0B5A8A notices reuse the accent */ --color-info-soft: 226 238 246; /* #E2EEF6 */ /* -- Structure -------------------------------------------------------- */ --color-line: 218 226 232; /* #DAE2E8 hairlines */ --color-line-strong: 185 199 210; /* #B9C7D2 input borders, hover */ --color-shadow: 15 58 92; /* #0F3A5C shadows are tinted, not grey */ --color-overlay: 12 20 27; /* #0C141B scrims */ /* -- Typefaces -------------------------------------------------------- */ /* Archivo: a grotesque drawn for signage and print; set tight and heavy it reads like a map sheet title rather than a product headline. Source Sans 3: humanist, survives 13px in a dense schema table. IBM Plex Mono: the data here is IBM cp037 EBCDIC off a mainframe, so the byte-level typeface is IBM's own. */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* -- Type scale (1.22 at reading sizes, opening to 1.3 for display) ---- */ --step--2: 0.75rem; /* 12px eyebrows, ruler numerals */ --step--1: 0.8125rem; /* 13px table cells, badges, captions */ --step-0: 1rem; /* 16px body */ --step-1: 1.1875rem; /* 19px lead paragraphs */ --step-2: 1.4375rem; /* 23px h3 */ --step-3: clamp(1.625rem, 1.45rem + 0.7vw, 1.9375rem); /* h2 */ --step-4: clamp(2rem, 1.7rem + 1.3vw, 2.625rem); /* h1 */ --step-5: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); /* hero */ --leading-tight: 1.1; --leading-snug: 1.28; --leading-normal: 1.6; --leading-loose: 1.72; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.09em; /* eyebrows and small caps labels */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* -- Space (a 4px base, doubling loosely) ----------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.375rem; --space-xs: 0.5rem; --space-s: 0.75rem; --space-m: 1rem; --space-l: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; /* -- Radii ------------------------------------------------------------- Deliberately small. Rounded corners read as consumer software; this is a survey document. Nothing exceeds 8px except the pill on a badge. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-pill: 999px; /* -- Elevation -------------------------------------------------------- */ --shadow-1: 0 1px 2px rgb(var(--color-shadow) / 0.06), 0 1px 1px rgb(var(--color-shadow) / 0.04); --shadow-2: 0 1px 2px rgb(var(--color-shadow) / 0.05), 0 8px 20px -10px rgb(var(--color-shadow) / 0.18); --shadow-pop: 0 2px 4px rgb(var(--color-shadow) / 0.08), 0 16px 40px -12px rgb(var(--color-shadow) / 0.30); /* -- Layout ----------------------------------------------------------- */ --shell-max: 78rem; /* outer gutter to outer gutter */ --measure: 68ch; /* prose line length ceiling */ --rail-width: 19.5rem; /* the right-hand sidebar */ --gutter: var(--space-m); /* The sticky header's height, which anchor targets and the sticky rail both reserve. Larger below 46rem, where the navigation wraps onto a second row. */ --header-height: 6rem; /* -- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --speed-fast: 110ms; --speed-base: 190ms; --speed-slow: 420ms; /* -- Focus ------------------------------------------------------------- Two rings: a paper-coloured halo so the marker stays visible on top of a filled button, and the ink ring itself. */ --focus-width: 2px; --focus-offset: 2px; --focus-ring: 0 0 0 var(--focus-offset) rgb(var(--color-paper)), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) rgb(var(--color-ink)); /* -- Reserved ad heights ------------------------------------------------ AdSense fills asynchronously. Reserving the height up front is the whole reason the layout does not jump when a unit arrives. */ --ad-leaderboard-height: 100px; --ad-leaderboard-height-wide: 100px; --ad-sidebar-height: 260px; --ad-in-content-height: 260px; --ad-in-grid-height: 260px; --ad-in-list-height: 120px; --ad-footer-height: 100px; } @media (min-width: 46rem) { :root { --header-height: 3.75rem; } } @media (min-width: 60rem) { :root { --gutter: var(--space-xl); --ad-leaderboard-height-wide: 90px; } } /* ── Dark: follows the system, unless the reader has forced light ───────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-paper: 10 18 25; /* #0A1219 deep water, not black */ --color-canvas: 17 28 37; /* #111C25 */ --color-canvas-sunk: 22 35 45; /* #16232D */ --color-canvas-raised: 23 37 48; /* #172530 */ --color-ink: 233 240 246; /* #E9F0F6 */ --color-text: 205 218 228; /* #CDDAE4 */ --color-muted: 143 162 175; /* #8FA2AF 6.2:1 on paper */ --color-faint: 106 125 139; /* #6A7D8B */ --color-inverse: 8 15 21; /* #080F15 */ --color-accent: 108 187 232; /* #6CBBE8 8:1 on paper */ --color-accent-strong: 154 210 240; /* #9AD2F0 */ --color-accent-soft: 19 45 62; /* #132D3E */ --color-accent-line: 45 86 114; /* #2D5672 */ --color-marker: 227 190 74; /* #E3BE4A */ --color-marker-bright: 240 208 106; /* #F0D06A */ --color-marker-soft: 45 38 18; /* #2D2612 */ --color-fresh: 95 203 174; /* #5FCBAE */ --color-fresh-soft: 15 47 41; /* #0F2F29 */ --color-caution: 227 154 106; /* #E39A6A */ --color-caution-soft: 51 32 20; /* #332014 */ --color-danger: 240 138 138; /* #F08A8A */ --color-danger-soft: 56 26 26; /* #381A1A */ --color-info: 108 187 232; /* #6CBBE8 */ --color-info-soft: 19 45 62; /* #132D3E */ --color-line: 32 47 60; /* #202F3C */ --color-line-strong: 51 71 88; /* #334758 */ --color-shadow: 0 0 0; /* #000000 shadow reads as depth here */ --color-overlay: 4 8 12; /* #04080C */ --shadow-1: 0 1px 2px rgb(var(--color-shadow) / 0.4); --shadow-2: 0 1px 2px rgb(var(--color-shadow) / 0.4), 0 8px 20px -10px rgb(var(--color-shadow) / 0.6); --shadow-pop: 0 2px 4px rgb(var(--color-shadow) / 0.5), 0 16px 40px -12px rgb(var(--color-shadow) / 0.75); --focus-ring: 0 0 0 var(--focus-offset) rgb(var(--color-paper)), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) rgb(var(--color-accent-strong)); } } /* ── Dark: forced by the header toggle, beating the system setting ──────── */ :root[data-theme="dark"] { color-scheme: dark; --color-paper: 10 18 25; /* #0A1219 */ --color-canvas: 17 28 37; /* #111C25 */ --color-canvas-sunk: 22 35 45; /* #16232D */ --color-canvas-raised: 23 37 48; /* #172530 */ --color-ink: 233 240 246; /* #E9F0F6 */ --color-text: 205 218 228; /* #CDDAE4 */ --color-muted: 143 162 175; /* #8FA2AF */ --color-faint: 106 125 139; /* #6A7D8B */ --color-inverse: 8 15 21; /* #080F15 */ --color-accent: 108 187 232; /* #6CBBE8 */ --color-accent-strong: 154 210 240; /* #9AD2F0 */ --color-accent-soft: 19 45 62; /* #132D3E */ --color-accent-line: 45 86 114; /* #2D5672 */ --color-marker: 227 190 74; /* #E3BE4A */ --color-marker-bright: 240 208 106; /* #F0D06A */ --color-marker-soft: 45 38 18; /* #2D2612 */ --color-fresh: 95 203 174; /* #5FCBAE */ --color-fresh-soft: 15 47 41; /* #0F2F29 */ --color-caution: 227 154 106; /* #E39A6A */ --color-caution-soft: 51 32 20; /* #332014 */ --color-danger: 240 138 138; /* #F08A8A */ --color-danger-soft: 56 26 26; /* #381A1A */ --color-info: 108 187 232; /* #6CBBE8 */ --color-info-soft: 19 45 62; /* #132D3E */ --color-line: 32 47 60; /* #202F3C */ --color-line-strong: 51 71 88; /* #334758 */ --color-shadow: 0 0 0; /* #000000 */ --color-overlay: 4 8 12; /* #04080C */ --shadow-1: 0 1px 2px rgb(var(--color-shadow) / 0.4); --shadow-2: 0 1px 2px rgb(var(--color-shadow) / 0.4), 0 8px 20px -10px rgb(var(--color-shadow) / 0.6); --shadow-pop: 0 2px 4px rgb(var(--color-shadow) / 0.5), 0 16px 40px -12px rgb(var(--color-shadow) / 0.75); --focus-ring: 0 0 0 var(--focus-offset) rgb(var(--color-paper)), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) rgb(var(--color-accent-strong)); } /* ── Motion preference ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --speed-fast: 1ms; --speed-base: 1ms; --speed-slow: 1ms; } }