/* VicFire theme — the LOCKED palette. * * Source of truth for the values: docs/palette/vicfire-palette.css, locked * 2026-08-14. That file is the record and carries the derivation; this file is * what the site loads. Re-sync by diffing against it. * * ── What this replaced ──────────────────────────────────────────────────── * Up to 2026-08-14 this was the GuardOps theme, ported from * guardops/src/index.css. GuardOps is gone from the CHROME only. Do not * "re-sync from GuardOps" — that instruction is obsolete and would revert the * page ground, the surfaces, the ink ramp and the accent. * * ── The four supplied colours, never altered ────────────────────────────── * #171515 dark page ground #F7F7F7 light page ground / dark ink * #0C090D onyx — the INSET, deeper than the dark ground, and light ink * #E01B1B racing red — the accent * * Surfaces and greys are derived from the two grounds in OKLCH with hue and * chroma HELD and only lightness moved. The dark ground is hue 17deg — a faint * warm red, not a neutral grey — which is why these surfaces sit comfortably * beside the red instead of reading as a cool palette with a warm accent * dropped on top. * * ── What was DELIBERATELY NOT carried over (owner's instruction) ────────── * The locked palette also supplies incident-type and turnout-clock colours. * Those are NOT applied. The five incident types and the three clock bands * keep the values this site already shipped, which is why --ok / --warn / * --danger / --cat-* below are unchanged from the GuardOps port. app.css maps * the types onto them. * * type kept fill clock band kept fill * fire --danger #ef4444 new --ok #10b981 * rescue --cat-2 #fbbf24 / #b45309 rolling --clock-rolling #fbbf24 * medical --cat-1 #7dd3fc / #0284c7 late --danger #ef4444 * alarm --cat-3 #a78bfa / #6d28d9 * other PINNED — see app.css * * Put data-theme="dark|light" on . theme.js does it before first paint. */ /* ── Dark — the default ─────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #171515; /* supplied */ --surface-1: #211f1f; /* derived — cards, panels, the rail */ --surface-2: #292727; /* derived — raised */ --surface-3: #312f2f; /* derived — topmost; the ground that decides contrast */ /* Recessed, DEEPER than the page ground. The raw-CAD panel inside the hero card is the one place this applies: that panel must read as cut into the card, and --bg cannot do that job in light mode where the cards step DOWN from the ground rather than up. */ --inset: #0C090D; /* supplied */ --sidebar-bg: #211f1f; /* = --surface-1 */ --sidebar-active: #312f2f;/* = --surface-3 */ --fg-1: #F7F7F7; /* supplied */ --fg-2: #c0bdbd; /* derived */ --fg-3: #a29f9f; /* derived — muted labels */ --border-1: #353333; /* derived — card border */ --border-2: #434141; /* derived — divider, secondary button */ /* The brigade / action chip, lifted ABOVE --surface-3 so it reads as a filled block off the card rather than sinking into it. Same intent as the GuardOps theme's #2b333e, re-derived on the new ramp. */ --badge-bg: #3a3838; /* derived */ --accent-fg: #F7F7F7; /* ── KEPT, not from the locked palette ──────────────────────────────── These are the incident-type and clock fills the owner excluded from the palette swap (2026-08-14). They are unchanged from the GuardOps port. Changing any of them changes an incident colour. */ --ok: #10b981; --warn: #f59e0b; --danger: #ef4444; --cat-1: #7dd3fc; /* medical */ --cat-2: #fbbf24; /* rescue */ --cat-3: #a78bfa; /* alarm */ --cat-4: #f472b6; --cat-5: #ef4444; --cat-6: #94a3b8; /* Magnitude meter — the "top districts" / "top brigades" bars on home. NEUTRAL ON PURPOSE: those bars encode COUNTS, and every chromatic hue in this product already means an incident type, so a saturated fill would assert a meaning the data does not have. Bar length carries the magnitude and the row label carries the identity, so the fill has no encoding job left — one colour for every bar, never a value-ramp. ⚠ NOT the locked palette's #434141. That value is IDENTICAL to --border-2, so the bar and its own track's hairline were the same colour — measured 1.31:1 against the track it sits in, i.e. not dim but absent. #7b7777 is the same hue lifted until it clears 3:1 (3.02 on the track, 3.72 on the card). Owner approved the correction 2026-08-14. */ --meter: #7b7777; } /* ── Light ──────────────────────────────────────────────────────────────── */ /* Cards step DOWN from the page ground, not up. #F7F7F7 is OKLCH L 0.976, so only 0.024 of lightness exists above it — a white card can never exceed ~1.07x off the page, which is what made the old light theme read as flat regions rather than as objects. Downward has the whole range and reaches 1.15x with a gentler step. */ [data-theme="light"] { --bg: #F7F7F7; /* supplied */ --surface-1: #e7e7e7; --surface-2: #dcdcdc; --surface-3: #d0d0d0; --inset: #c3c3c3; --sidebar-bg: #e7e7e7; /* = --surface-1 */ --sidebar-active: #dcdcdc;/* = --surface-2 */ --fg-1: #0C090D; /* supplied — onyx earns its keep as light ink */ --fg-2: #484848; --fg-3: #565656; --border-1: #c9c9c9; --border-2: #b6b6b6; --badge-bg: #d6d6d6; /* KEPT — see the dark block. */ --cat-1: #0284c7; --cat-2: #b45309; --cat-3: #6d28d9; --cat-4: #be185d; --cat-5: #b91c1c; --cat-6: #475569; --meter: #565656; /* 4.76:1 on its track; no correction needed */ } /* ── Ink variants — the SAME hue, safe as TEXT ──────────────────────────── * `--ok` / `--warn` / `--danger` / `--cat-1` were validated as FILLS, where * ink sits on top and the fill only has to be distinguishable. Used as text on * a ground they are a different measurement entirely. * * FILLS KEEP THE ORIGINAL TOKEN. Only `color:` resolves through -ink — * swapping a fill to its ink value would change the incident type colours, * which are load-bearing. * * ⚠ THE LIGHT VALUES MOVED WHEN THE PALETTE LANDED, and the reason is * structural rather than a series of mistakes. The old light surfaces ran * #ffffff / #f3f4f7 / #e7e9ee; the new ones step DOWN to #e7e7e7 / #dcdcdc / * #d0d0d0. Ink tuned against a white card does not survive a card three steps * darker. Measured on the new grounds, the inherited values read: * * --ok-ink #047857 3.56:1 on --surface-3 (needs 4.5) * --cat-1-ink #0369a1 3.85:1 * --danger-ink #b91c1c 3.67:1 on --inset * * Each was darkened by the MINIMUM that clears 4.5:1, hue and saturation held. * Dark mode needed nothing — every value there was already clear. * * Every value is measured against the WORST of its theme's grounds * (bg / surface-1 / surface-2 / surface-3 / badge-bg, plus --inset for the two * tokens that actually render inside the inset panel), not the common one. * A value that looks fine on --surface-1 and fails on --surface-3 is the * recurring failure mode here. */ :root, [data-theme="dark"] { --ok-ink: #10b981; /* = --ok, 5.25:1 worst dark ground */ --warn-ink: #f59e0b; /* = --warn, 6.20:1 */ --danger-ink: #f87171; /* lifted from #ef4444; 4.81:1 */ --cat-1-ink: #7dd3fc; /* = --cat-1, 7.98:1 */ } [data-theme="light"] { --ok-ink: #03664a; /* 4.52:1 worst light ground (was #047857, 3.56) */ --warn-ink: #92400e; /* 4.60:1 — unchanged, still clears. Amber cannot stay bright as text on a light ground; this is the same trade the --clock-rolling note describes, resolved the other way because a gust reading is read rather than glanced at */ --danger-ink: #a01818; /* 4.50:1 on --inset (was #b91c1c, 3.67) */ --cat-1-ink: #035e90; /* 4.53:1 (was #0369a1, 3.85) */ } /* The sidebar has its own ink tokens. They alias the page ink, but the indirection is kept: app.css already resolves the sidebar through it. */ :root { --sidebar-fg-1: var(--fg-1); --sidebar-fg-2: var(--fg-2); --sidebar-fg-3: var(--fg-3); --sidebar-border: var(--border-1); } /* ── Fixed accents ──────────────────────────────────────────────────────── * Colours that must NOT swap with the theme, because they carry an * operational meaning rather than a decorative one. * * The turnout clock's middle band used --cat-2, which is #fbbf24 under dark * but #b45309 under light — a burnt brown. "Green, then yellow, then red" is * the whole point of the sequence, and half the users were getting brown for * the middle step. Pinned to the dark theme's value in both. * * KEPT from the previous theme along with the rest of the clock. */ :root { --clock-rolling: #fbbf24; } /* ── Accent ─────────────────────────────────────────────────────────────── * #E01B1B, supplied. It is deliberately NOT --danger's #ef4444: the accent and * the fire incident type were the same value under the old theme, so every * link, focus ring and active rail item was painted in the colour that means * "structure fire" everywhere else in this product. * * --accent-ink is the text-safe twin. `a { color: var(--accent) }` was the * single biggest source of light-theme contrast failures on this site, so * colour resolves through -ink and only fills use --accent. * * dark #fe6600 — the supplied autumn leaf #F06000 lifted to clear 4.5:1 * on --surface-3, where it measured 4.04 * light #b21515 — the supplied red darkened to clear 4.5:1 on the cards, * where #E01B1B measured 3.14 * Owner approved both corrections 2026-08-14. * * ⚠ NOTHING SETS data-accent. The six blocks below are inert unless the * attribute is added by hand — :root is what actually governs. An earlier * note in CLAUDE.md claimed production served data-accent="crimson"; it does * not, and no page in public/ writes the attribute. crimson is kept in step * with :root so that setting it by hand is a no-op rather than a revert. */ :root { --accent: #E01B1B; --accent-ink: #fe6600; } [data-theme="light"] { --accent-ink: #b21515; } [data-accent="blue"] { --accent: #3b82f6; --accent-ink: #60a5fa; } [data-accent="green"] { --accent: #10b981; --accent-ink: #10b981; } [data-accent="amber"] { --accent: #f59e0b; --accent-ink: #f59e0b; } [data-accent="violet"] { --accent: #8b5cf6; --accent-ink: #a78bfa; } [data-accent="crimson"] { --accent: #E01B1B; --accent-ink: #fe6600; } [data-accent="cyan"] { --accent: #22d3ee; --accent-ink: #22d3ee; } /* Compound on purpose: [data-theme="light"] and [data-accent="…"] have identical specificity (0,1,0) and the accent blocks come later, so a plain light rule loses whenever the attribute is set explicitly. 0,2,0 wins in both directions. */ [data-theme="light"][data-accent="blue"] { --accent-ink: #1d4ed8; } [data-theme="light"][data-accent="green"] { --accent-ink: #047857; } [data-theme="light"][data-accent="amber"] { --accent-ink: #92400e; } [data-theme="light"][data-accent="violet"] { --accent-ink: #6d28d9; } [data-theme="light"][data-accent="crimson"] { --accent-ink: #b21515; } [data-theme="light"][data-accent="cyan"] { --accent-ink: #155e75; } /* ── AFDRS fire danger — official, and outside the site palette ─────────── * A national standard with legislated public-safety meaning. The ratings are * recognised by colour on roadside signs and in broadcast, so they are not a * design choice and MUST NOT be harmonised with the rest of the palette. * * They do not swap between themes — an official colour has one value. * * Provenance, because it matters for a safety standard: * MODERATE / HIGH read from the Bureau of Meteorology API field * fire_danger_category.default_colour, the same field * weather.js already reads. Confirmed identical across * seven independent locations. default_colour and * dark_mode_colour carry the same value for every rating, * so there is no dark variant to carry. * EXTREME / supplied by the owner from the AFAC style guidelines. * CATASTROPHIC Not obtainable from the feed: neither rating occurred * anywhere in Australia on 2026-08-14 (52 northern * locations sampled, nothing above High). * NO RATING the feed returns NULL, not a colour. AFDRS renders it as * a white bar beneath Moderate. Deliberately unemphatic — * it is the normal state for most of the year — so it * resolves to --fg-3 rather than to a hue. * * This REPLACES the previous mapping onto --ok / --cat-2 / --warn / --danger, * which also needed a per-theme swap of high and extreme because those two * tokens crossed over between themes. An official colour cannot cross over, * so that swap is gone with it. */ :root { --fdr-no-rating: var(--fg-3); --fdr-moderate: #64bf30; --fdr-high: #fedd3a; --fdr-extreme: #e77e2b; --fdr-catastrophic: #9a2627; /* Ink for each, chosen FROM the site palette and measured, so the ratings read as part of this UI even though the fills are external. */ --fdr-moderate-ink: #0C090D; /* 8.52:1 */ --fdr-high-ink: #0C090D; /* 14.73:1 */ --fdr-extreme-ink: #0C090D; /* 6.99:1 */ --fdr-catastrophic-ink: #F7F7F7; /* 7.31:1 */ --fdr-no-rating-ink: #0C090D; } /* ⚠ Light mode needs a BOUNDARY on these blocks, not different colours. Measured against the light card #e7e7e7 the fills are moderate 1.88, high 1.09, extreme 2.29 — high is effectively invisible as a block edge, yellow on light grey. The text inside stays perfectly legible (14.73:1), so this is an edge problem, not a contrast failure. Dark mode is clear at 5.79:1 or better except catastrophic (2.09), a dark red on a dark card, which wants the same treatment. The rule itself lives in home.html beside the grid it applies to — this file is tokens only and must not name page classes. */ /* ── Geometry, type, elevation ──────────────────────────────────────────── */ :root { --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.5); }