:root { /* Visual identity refresh (2026-09-25) — see DESIGN.md's "Visual identity refresh" entry for the full reasoning and the 4-option comparison this came out of ("Soft Approachable"). This is a VALUE swap under the EXISTING token names, not a rename: --navy/--accent/--btn-primary etc. keep their established roles (structural chrome, interactive accent, action buttons) so every one of the ~40 rules referencing them below doesn't need touching individually — only what each token resolves to changes. --navy was a literal navy blue and is now a deep violet (still the "structural/authority" colour — panel headers, active tab state, brand text); --accent moves from teal to the same violet family as the new brand accent; --btn-primary is now the SAME hue as --accent (previously a third, distinct blue) — one consistent brand hue for "interactive," not three different blues/teals for three unrelated roles, which was part of what read as an unbranded default before. */ --navy: #4a3e8c; --navy-dark: #332b66; --hub-phase: #0e7490; /* Gantt phase bars: teal, apart from the purple tasks */ --hub-phase-bg: #e3f2f5; /* the whole phase row, in every Hub list */ --accent: #7c5cfc; --accent-light: #efe9fe; --ink: #241f38; --muted: #7a7290; --border: #e7e1f5; --bg: #f6f4fb; --surface: #ffffff; --warn: #b07a12; --warn-bg: #fdefd9; --ok: #22935a; --ok-bg: #e1f5e7; --danger: #c24c58; --radius: 10px; /* A second, larger radius for the prominent hero/card components the refresh introduced (theme cards, the hero ring panel) — deliberately not a global --radius bump, which would also round every dense table cell and input to the same degree and hurt legibility there. */ --radius-lg: 18px; /* Sidebar nav (2026-10-05 — see DESIGN.md's "Sidebar navigation replaces the top bar" entry). Widths match the confirmed mockup exactly: 256px expanded, 68px collapsed (icon rail) — same numbers cms1's own SidebarNav uses (w-64/w-[68px]), reused here because they're sensible sizes, not because of where they came from; every colour below is this site's own token, never cms1's. --sidebar-mobile-h is the slim top-bar height the sidebar collapses into below the mobile breakpoint (styles.css's existing 640px convention — see the Mobile section). */ --sidebar-w: 256px; --sidebar-w-collapsed: 68px; --sidebar-mobile-h: 56px; /* Display type, layered on top of headings and big numbers only — body copy stays on the system stack below. Loaded via a Google Fonts in every page's — see DESIGN.md's "Visual identity refresh" entry for the exact families/weights loaded. */ --font-display: "Sora", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Button colour — same token as --accent now (see the refresh comment above): still its own named token, not a direct reuse of --cat-1, even though it's the same hex: --cat-1 is reserved for policy- category identity (WHS) per this file's "never reuse one family for a different meaning" rule (see the Categorical palette comment below), and .btn is a generic action colour used everywhere, unrelated to any one category — reusing --cat-1 itself here would make a plain "Save" button visually claim "WHS category". --btn-primary-hover is a darker step of the same violet, matching this site's existing light/dark button-hover relationship. */ --btn-primary: #7c5cfc; --btn-primary-hover: #5a3fe0; /* Status palette (fixed — represents state, never re-themed or reused for categorical series). good/warning/serious map to Complete / For review / Needs update throughout the dashboards. */ /* Values updated as part of the 2026-09-25 visual identity refresh — the same good/warn/serious tones the --status-green/-amber/-red shared primitives above now use (kept as separate variables, not merged into one family: this one drives .badge.ok/warn/serious/muted and .kpi-tile.good/warning/serious specifically, a different call site set than the risk/burn/stakeholder families, per this file's established "each family keeps its own class names" rule). */ --status-good: #22935a; --status-good-bg: #e1f5e7; --status-warning: #b07a12; --status-warning-bg: #fdefd9; --status-serious: #c24c58; --status-serious-bg: #fce3e5; --status-muted: #7a7290; --status-muted-bg: #efe9fe; /* Categorical palette (fixed order — never reordered/reassigned), one slot per policy section. Six of the eight validated default slots. */ --cat-1: #2a78d6; /* blue — Work Health and Safety */ --cat-2: #eb6834; /* orange — Human Resources */ --cat-3: #1baf7a; /* aqua — Time and Expense Management */ --cat-4: #eda100; /* yellow — Ethics */ --cat-5: #e87ba4; /* magenta — IT, Privacy and Data Management */ --cat-6: #008300; /* green — Terms and Conditions */ /* Spacing scale (2026-09-22, "make aha_tools feel as spacious as cms1" pass). cms1 (a Tailwind app, default spacing scale) reads noticeably more spacious than this site did — not a different visual language, just consistently bigger numbers at every step: its card padding is p-6 (24px all sides, HomePage.tsx's shortcut tiles/panels), its stat/shortcut tile grid gap is gap-5 (20px), its panel header padding is px-6 py-4 (24px/16px), its list-row padding is px-5 py-3.5 (20px/14px), and its major section margins are mb-8 (32px) — extracted directly from cms1's own source (HomePage.tsx, AppointmentsListCard.tsx, ClientDirectory.tsx), not guessed. This site's equivalents were roughly half that at every comparable spot (.panel-body: 0.7rem 0.85rem ≈ 11px/14px; .kpi-row gap: 0.6rem ≈ 9.6px; table cells: 0.45rem 0.7rem ≈ 7px/11px) — which is what actually reads as "cramped" next to cms1, not a colour or component difference (those were already addressed in the earlier cms1-comparison pass above, for hover/text colour). One scale, referenced everywhere spacing is set on a shared component (.panel/.panel-header/.panel-body, .card, .kpi-row/.kpi-tile, table.dashboard-table cells, .policy-row, main's own top-level padding, .tabs/.filter-row/.search-bar/.category-filters/.btn-row) — extend this scale for new spacing rather than hardcoding a new rem value, the same "one token system, not scattered magic numbers" discipline the colour tokens above already follow. Not a 1:1 copy of Tailwind's own scale (that has far more steps than this site needs) — just enough steps to cover every existing spacing value in this file, each one now sized to actually close the gap with cms1's numbers above rather than sitting at roughly half of them. */ --space-1: 0.25rem; /* 4px — tightest gaps (badge dot, icon-to-label) */ --space-2: 0.5rem; /* 8px — small inline gaps */ --space-3: 0.75rem; /* 12px — compact padding (panel-header, table cells) */ --space-4: 1rem; /* 16px — standard padding/margin step */ --space-5: 1.25rem; /* 20px — cms1's list-row/tile-grid-gap step */ --space-6: 1.5rem; /* 24px — cms1's card padding (p-6) */ --space-7: 2rem; /* 32px — cms1's major section margin (mb-8) */ --space-8: 3rem; /* 48px — page bottom padding */ /* Base type size/leading bumped alongside the spacing scale — cms1 (an unset Tailwind app) renders body text at Tailwind's 16px/1.5 default; this site's 15px/1.45 wasn't itself the main source of the "cramped" read (the spacing values above were), but a slightly larger base size and looser leading is part of the same "more breathing room" request and costs nothing else to move alongside the spacing bump. */ font-size: 16px; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; } a { color: var(--accent); } /* Sidebar nav (2026-10-05 — replaces the 2026-09-25 horizontal top bar; see DESIGN.md's "Sidebar navigation replaces the top bar" entry for the full design/reasoning/verification). `#site-header` is still the exact same `