/* ── PEItools shared theme tokens ──────────────────────────────────────── Single source of truth for the colour palette. Before this file, 20 templates each declared their own :root block, and they had DRIFTED: home.html's dark palette was a different shade from base.html's, so the home screen never quite matched the rest of the app. Casey picked home.html's dark as canonical (2026-07-26), so that is what :root carries here. THE MORE IMPORTANT FIX: High Contrast (for reading a tablet outdoors in direct sun) was only implemented in 4 of those 20 templates. Toggling it on the home screen and then opening, say, the plans editor put you back in dark mode with no explanation. Because every page that loads this file gets the html[data-contrast="high"] block below, the toggle now works everywhere for free. ── Token vocabulary ── Two naming conventions grew up in parallel and BOTH are still in use across templates, so this file defines the UNION. Do not delete a token because it looks redundant with its neighbour -- something still references it, and a missing custom property fails silently as an unstyled element rather than a loud error. base.html lineage : --surface --text2 --green2 --red --accent home.html lineage : --sidebar --muted --over --warn --topbar-h Aliases are deliberate: --text2 and --muted hold the same value, as do --green2/--green and --red/--over in high contrast. Include via {% include '_theme_head.html' %} in , which also applies the saved contrast setting before first paint. Adding a raw without that partial reintroduces a flash of the wrong theme. */ :root { /* Surfaces, darkest to lightest */ --bg: #0e1620; --sidebar: #0a121b; --surface: #121b26; /* sits between bg and card, as in the base lineage */ --card: #16202c; --border: rgba(255,255,255,.07); /* Text */ --text: #e9eef5; --muted: #8a99ab; --text2: #8a99ab; /* alias of --muted (base lineage) */ /* Accents */ --blue: #60b4f0; --green: #4cde7a; --green2: #238636; /* darker green for solid button fills */ --red: #db1523; --over: #f0703a; /* over-budget / over-hours warning */ --warn: #f6b85a; --accent: rgba(96,180,240,0.12); /* Second-tier variants. These exist because the employee-portal templates hardcoded them ~50 times between them and had no tokens at all, so High Contrast did nothing on the crew's own pages. They keep their original values deliberately: the goal there was to make those pages THEMEABLE, not to restyle them. --red-soft in particular is the de-facto red of this codebase (20 uses across 7 templates, plus all three editors) even though --red above came from base.html. */ --red-soft: #f85149; /* lighter red; reads better on the editors' canvas */ --blue-deep: #1f6feb; /* darker blue used on share/portal pages */ --surface2: #21262d; /* raised panel, one step above --surface */ --muted2: #484f58; /* dimmer than --muted: hints, disabled text */ /* Text sitting ON TOP of an accent-coloured button. Needs its own token rather than a hardcoded hex: in high contrast the accents themselves go dark (--blue drops from sky blue to deep navy), so dark text that read fine on the light version becomes near-invisible on the dark one. */ --on-accent: #0d1117; /* Layout */ --sidebar-w: 184px; --topbar-h: 54px; /* Checklist-line highlight colours (Lists tool + home Reminders panel). Low-alpha rgba tints, not solid fills: composited over whatever --card happens to be, they read correctly in dark mode, high contrast, and any future theme with zero per-theme overrides below -- the row's own text colour (and the muted --text2 strikethrough on a checked item) stays on top and stays readable either way. Hues echo AV_COLORS (gantt.html / kanban.html) so it reads as the same app; never red (that's reserved for shipment-colour semantics elsewhere -- see PROJECT_NOTES). */ --hl-yellow: rgba(212,160,23,0.22); --hl-green: rgba(63,185,80,0.22); --hl-blue: rgba(31,111,235,0.22); --hl-pink: rgba(214,51,132,0.22); --hl-orange: rgba(232,115,12,0.22); --hl-purple: rgba(137,87,229,0.22); } /* ── High Contrast — for reading a tablet outdoors in daylight ─────────── A dark theme just glares in direct sun; a bright white background with pure black text and heavy borders reads far better outside. Overrides every themed colour at once, since the rest of the app's CSS is built on these custom properties. Toggled by setting html[data-contrast="high"]; persisted in localStorage under 'pei_high_contrast' ('1' = on). See _theme_head.html. */ html[data-contrast="high"] { --bg: #ffffff; --sidebar: #ffffff; --surface: #ffffff; --card: #ffffff; --border: #000000; --text: #000000; --muted: #1a1a1a; --text2: #1a1a1a; --blue: #0033cc; --green: #0a7a2f; --green2: #0a7a2f; --red: #b00020; --over: #b00020; --warn: #8a6400; --accent: rgba(0,51,204,0.12); /* Second-tier variants collapse into their primaries here. High contrast is about maximum legibility in direct sun, so the subtle distinctions that matter indoors (a slightly lighter red, a raised panel) actively hurt -- everything flattens to white surfaces and pure-black text. */ --red-soft: #b00020; --blue-deep: #0033cc; --surface2: #ffffff; --muted2: #1a1a1a; --on-accent: #ffffff; } /* Decorative background imagery is pure glare outdoors — hide it. */ html[data-contrast="high"] .bg, html[data-contrast="high"] .bg-overlay { display: none; }