/* Oxford Green design tokens, carried over from the prototype's `styles.css :root`. Everything visual references a token — no hardcoded colours, radii or transitions in component stylesheets. There are three sets here and they must stay in step: 1. Breezer's own variables (`--primary-colour`, `--background-colour`, …). Breezer's whole stylesheet reads these with fallbacks, so setting them themes the shell — sidebar, header, tables, inputs — not just our own components. 2. Our semantic tokens (surfaces, text, rules, status colours). 3. The trade colours, which are load-bearing: `Trade.ColourToken` on a seeded trade holds the literal `var(--trade-concrete)` expression, so renaming one breaks the program chart. Theme is chosen by `data-theme` on , set before first paint by /shared/js/theme.js. With no explicit choice we follow the operating system. */ /* ── Shared across both themes ── */ :root { /* Trade colours. Chosen to stay legible on either ground, so they do not switch. */ --trade-engineer: #f2555a; --trade-certifier: #e05fae; --trade-precast: #92d050; --trade-site: #bb9880; --trade-concrete: #a8adb4; --trade-panels: #5fbf6a; --trade-delivery: #ffc000; --trade-crane: #ff8a3d; --trade-plumbing: #45c0ee; --trade-carpentry: #e0b45c; --trade-roofing: #9b86ea; --trade-cladding: #c9a2d4; --trade-linings: #a9c0dd; --trade-electrical: #f2e04a; --trade-tiling: #3fc5b3; --trade-fitout: #f2649a; --trade-joinery: #cf9d6d; --trade-windows: #8a8aeb; --trade-painting: #bd7be0; --trade-flooring: #c4b95e; --trade-pest: #d2814a; --trade-cleaning: #86b6d6; --trade-handover: #4fd995; /* Shape and motion */ --card-radius: 16px; --btn-radius: 10px; --micro-radius: 4px; --pill-radius: 20px; --transition-fast: 0.12s; --transition-base: 0.2s; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Type. Poppins for everything, Lato behind it, and DM Mono where a number has to line up — straight from the prototype. The faces are loaded from Google Fonts by the host, so both the app and the sign-in pages get them. */ --font-heading: 'Poppins', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Poppins', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'Cascadia Mono', Consolas, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; /* Chart geometry */ --gantt-header-height: 30px; --gantt-row-height: 34px; /* Shell geometry */ --topbar-height: 78px; --sidebar-width: 251px; /* Type weights */ --fw-semibold: 600; --fw-bold: 700; --text-lg: 18px; --text-xl: 22px; /* The sidebar is dark by design in both themes, so what sits on it does not flip with the theme. That is why these are here and not in the two palettes. */ --navy: #191c19; --charcoal: #262a26; --on-dark: #ffffff; --on-dark-90: rgba(255, 255, 255, 0.9); --on-dark-60: rgba(255, 255, 255, 0.6); --on-dark-55: rgba(255, 255, 255, 0.55); --on-dark-30: rgba(255, 255, 255, 0.3); --on-dark-10: rgba(255, 255, 255, 0.1); --on-dark-08: rgba(255, 255, 255, 0.08); } /* ── Light ── */ /* ── Dark — the prototype's own palette ── */ :root { --mint: #1f9d5f; --mint-dark: #17794a; --mint-light: rgba(31, 157, 95, 0.3); --mint-pale: rgba(31, 157, 95, 0.08); --on-mint: #ffffff; --og-bg: #f7f8f7; --og-panel: #ffffff; --og-surface-dark: #f0f2f0; --og-text: #1c211c; --gray-50: #f4f6f4; --gray-100: #e9ece9; --gray-200: #dfe3df; --gray-300: #c8cec8; --gray-400: #8b918b; --gray-500: #6f766f; --gray-700: #454b45; --gray-900: #1c211c; --mid: #6f766f; --muted: #8b918b; --rule: #dfe3df; --red: #c0392b; --red-light: rgba(192, 57, 43, 0.1); --amber: #b8730c; --amber-light: rgba(184, 115, 12, 0.12); --green: #1f9d5f; --green-light: rgba(31, 157, 95, 0.12); --blue: #2b6cb0; --blue-light: rgba(43, 108, 176, 0.1); --purple: #6b46c1; --purple-light: rgba(107, 70, 193, 0.1); --gantt-track: #d7dbd7; --gantt-shadow: #ebeeeb; --gantt-grid: #e3e6e3; --gantt-label-bg: #ffffff; --gantt-header-bg: #f4f6f4; /* Breezer's own variables — these theme the shell itself. */ --white: #ffffff; --primary-colour: #1f9d5f; --secondary-colour: #17794a; --text-colour: #1c211c; --secondary-text-colour: #454b45; --warning-colour: #c0392b; --border-colour: #dfe3df; --background-colour: #f7f8f7; --background-highlight-colour: rgba(31, 157, 95, 0.1); } /* No explicit choice — follow the operating system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mint: #8ae0b1; --mint-dark: #6fd39a; --mint-light: rgba(138, 224, 177, 0.35); --mint-pale: rgba(138, 224, 177, 0.1); --on-mint: #0c1410; --og-bg: #0a0b0a; --og-panel: #2a2e2a; --og-surface-dark: #0b0c0b; --og-text: #ececed; --gray-50: #1f231f; --gray-100: #343934; --gray-200: #3d423d; --gray-300: #4d534d; --gray-400: #898e89; --gray-500: #9fa49f; --gray-700: #d2d5d2; --gray-900: #f3f4f3; --mid: #9fa49f; --muted: #7f847f; --rule: #3d423d; --red: #f27a7a; --red-light: rgba(242, 122, 122, 0.14); --amber: #f2b33d; --amber-light: rgba(242, 179, 61, 0.14); --green: #59d98d; --green-light: rgba(89, 217, 141, 0.16); --blue: #6aa7e8; --blue-light: rgba(106, 167, 232, 0.16); --purple: #b79ae0; --purple-light: rgba(183, 154, 224, 0.16); --gantt-track: #454b45; --gantt-shadow: #2f342f; --gantt-grid: #3d423d; --gantt-label-bg: #2a2e2a; --gantt-header-bg: #1f231f; --white: #2a2e2a; --primary-colour: #8ae0b1; --secondary-colour: #6fd39a; --text-colour: #ececed; --secondary-text-colour: #d2d5d2; --warning-colour: #f27a7a; --border-colour: #3d423d; --background-colour: #0a0b0a; --background-highlight-colour: rgba(138, 224, 177, 0.14); } } /* An explicit choice wins in both directions. */ :root[data-theme="dark"] { --mint: #8ae0b1; --mint-dark: #6fd39a; --mint-light: rgba(138, 224, 177, 0.35); --mint-pale: rgba(138, 224, 177, 0.1); --on-mint: #0c1410; --og-bg: #0a0b0a; --og-panel: #2a2e2a; --og-surface-dark: #0b0c0b; --og-text: #ececed; --gray-50: #1f231f; --gray-100: #343934; --gray-200: #3d423d; --gray-300: #4d534d; --gray-400: #898e89; --gray-500: #9fa49f; --gray-700: #d2d5d2; --gray-900: #f3f4f3; --mid: #9fa49f; --muted: #7f847f; --rule: #3d423d; --red: #f27a7a; --red-light: rgba(242, 122, 122, 0.14); --amber: #f2b33d; --amber-light: rgba(242, 179, 61, 0.14); --green: #59d98d; --green-light: rgba(89, 217, 141, 0.16); --blue: #6aa7e8; --blue-light: rgba(106, 167, 232, 0.16); --purple: #b79ae0; --purple-light: rgba(183, 154, 224, 0.16); --gantt-track: #454b45; --gantt-shadow: #2f342f; --gantt-grid: #3d423d; --gantt-label-bg: #2a2e2a; --gantt-header-bg: #1f231f; --white: #2a2e2a; --primary-colour: #8ae0b1; --secondary-colour: #6fd39a; --text-colour: #ececed; --secondary-text-colour: #d2d5d2; --warning-colour: #f27a7a; --border-colour: #3d423d; --background-colour: #0a0b0a; --background-highlight-colour: rgba(138, 224, 177, 0.14); } :root[data-theme="light"] { --mint: #1f9d5f; --mint-dark: #17794a; --mint-light: rgba(31, 157, 95, 0.3); --mint-pale: rgba(31, 157, 95, 0.08); --on-mint: #ffffff; --og-bg: #f7f8f7; --og-panel: #ffffff; --og-surface-dark: #f0f2f0; --og-text: #1c211c; --gray-50: #f4f6f4; --gray-100: #e9ece9; --gray-200: #dfe3df; --gray-300: #c8cec8; --gray-400: #8b918b; --gray-500: #6f766f; --gray-700: #454b45; --gray-900: #1c211c; --mid: #6f766f; --muted: #8b918b; --rule: #dfe3df; --red: #c0392b; --red-light: rgba(192, 57, 43, 0.1); --amber: #b8730c; --amber-light: rgba(184, 115, 12, 0.12); --green: #1f9d5f; --green-light: rgba(31, 157, 95, 0.12); --blue: #2b6cb0; --blue-light: rgba(43, 108, 176, 0.1); --purple: #6b46c1; --purple-light: rgba(107, 70, 193, 0.1); --gantt-track: #d7dbd7; --gantt-shadow: #ebeeeb; --gantt-grid: #e3e6e3; --gantt-label-bg: #ffffff; --gantt-header-bg: #f4f6f4; /* Breezer's own variables — these theme the shell itself. */ --white: #ffffff; --primary-colour: #1f9d5f; --secondary-colour: #17794a; --text-colour: #1c211c; --secondary-text-colour: #454b45; --warning-colour: #c0392b; --border-colour: #dfe3df; --background-colour: #f7f8f7; --background-highlight-colour: rgba(31, 157, 95, 0.1); } body { background: var(--background-colour); color: var(--text-colour); } /* The typeface, applied once here rather than in each stylesheet. Breezer's own components inherit from the document, so setting it on html/body reaches the shell, the generated pages and the sign-in screens alike. Form controls do not inherit font by default, which is why they are named. */ html, body { font-family: var(--font-body); } button, input, select, textarea { font-family: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } /* Anything that has to line up in a column — codes, references, quantities. */ .mono, code, pre { font-family: var(--font-mono); }