/* ========================================================================== AthosFX design tokens (Brand Book v1.3: docs/AthosFX-Brand-Book.md) THE ONE PLACE WHERE BRAND COLOURS ARE WRITTEN. Loaded first, before bootstrap.min.css, style13.css and athosfx-theme.css. Those files (and the CSS in src/) use the --color-* names from here for every brand colour. To change the theme: - New brand colour ........ edit section 1 (hex AND its -rgb line). - Use a different colour for a role ............... edit section 2. - Never write a brand hex colour in another CSS file. Use a token. JavaScript: inline styles use these tokens directly ("var(--color-primary)"). Charts and other code that needs a real value read section 1 through src/utils/brand.js, so they follow this file too. Not covered: neutral greys/white, one-off decorative colours in JSX, and the darker/lighter steps of the success and danger colours inside bootstrap.min.css and style13.css. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND PALETTE: raw colours. Every colour needs two lines: the hex, and the same colour as "R, G, B" (used for transparent versions, e.g. rgba(var(--color-primary-rgb), 0.1)). ---------------------------------------------------------------------- */ --athos-teal: #0E5E6F; /* Primary: Aegean Teal */ --athos-teal-rgb: 14, 94, 111; --athos-gold: #C9A24A; /* Accent: Athos Gold (thin lines and icons only) */ --athos-gold-rgb: 201, 162, 74; --athos-ivory: #FAF7F0; /* Background: Ivory */ --athos-ivory-rgb: 250, 247, 240; --athos-charcoal: #12343B; /* Text: Deep Teal-Charcoal */ --athos-charcoal-rgb: 18, 52, 59; --athos-mist: #E6E9EA; /* Light support: Mist Silver */ --athos-mist-rgb: 230, 233, 234; /* Not in the brand book: supporting shades chosen to sit with the palette */ --athos-muted: #5C7378; /* softer charcoal: secondary text, secondary buttons */ --athos-muted-rgb: 92, 115, 120; --athos-sea: #3A8694; /* lighter teal: "info" states */ --athos-sea-rgb: 58, 134, 148; /* Functional colours (allowed by the brand book for price up/down, success and errors) */ --athos-green: #34C38F; --athos-green-rgb: 52, 195, 143; --athos-red: #F46A6A; --athos-red-rgb: 244, 106, 106; /* Fonts */ --athos-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --athos-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* ---------------------------------------------------------------------- 2. ROLES: what each colour is used for. All other CSS uses these names. ---------------------------------------------------------------------- */ --color-primary: var(--athos-teal); /* buttons, links, sidebar, active states */ --color-primary-rgb: var(--athos-teal-rgb); --color-accent: var(--athos-gold); /* accent lines, "warning" states */ --color-accent-rgb: var(--athos-gold-rgb); --color-info: var(--athos-sea); --color-info-rgb: var(--athos-sea-rgb); --color-secondary: var(--athos-muted); /* secondary buttons and secondary text */ --color-secondary-rgb: var(--athos-muted-rgb); --color-success: var(--athos-green); --color-success-rgb: var(--athos-green-rgb); --color-danger: var(--athos-red); --color-danger-rgb: var(--athos-red-rgb); --color-bg: var(--athos-ivory); /* page background */ --color-bg-rgb: var(--athos-ivory-rgb); --color-surface: #FFFFFF; /* cards, topbar: white panels on the page */ --color-on-primary: var(--athos-ivory); /* text and icons on a primary-coloured surface (sidebar) */ --color-on-primary-rgb: var(--athos-ivory-rgb); --color-text: var(--athos-charcoal); /* main text */ --color-text-rgb: var(--athos-charcoal-rgb); --color-text-muted: var(--color-secondary); --color-border: var(--athos-mist); /* borders and divider lines */ --color-border-rgb: var(--athos-mist-rgb); --color-light: var(--athos-mist); /* light fills: light buttons, light backgrounds */ --color-light-rgb: var(--athos-mist-rgb); --font-body: var(--athos-font-body); --font-display: var(--athos-font-display); /* ---------------------------------------------------------------------- 3. SHADES: darker (-dNN) and lighter (-tNN) steps of a role colour. -d15 = 15% darker, -t80 = 80% lighter (almost white). They are calculated from section 2 in the @supports block below, so they never need editing. The values here are only a fallback for browsers older than 2023: darker steps fall back to the base colour, lighter steps to a transparent version of it. ---------------------------------------------------------------------- */ --color-primary-d15: var(--color-primary); --color-primary-d20: var(--color-primary); --color-primary-d25: var(--color-primary); --color-primary-d40: var(--color-primary); --color-primary-d60: var(--color-primary); --color-primary-t20: rgba(var(--color-primary-rgb), 0.8); --color-primary-t40: rgba(var(--color-primary-rgb), 0.6); --color-primary-t60: rgba(var(--color-primary-rgb), 0.4); --color-primary-t70: rgba(var(--color-primary-rgb), 0.3); --color-primary-t80: rgba(var(--color-primary-rgb), 0.2); --color-accent-d15: var(--color-accent); --color-accent-d20: var(--color-accent); --color-accent-d25: var(--color-accent); --color-accent-d40: var(--color-accent); --color-accent-d60: var(--color-accent); --color-accent-t40: rgba(var(--color-accent-rgb), 0.6); --color-accent-t60: rgba(var(--color-accent-rgb), 0.4); --color-accent-t80: rgba(var(--color-accent-rgb), 0.2); --color-info-d15: var(--color-info); --color-info-d20: var(--color-info); --color-info-d25: var(--color-info); --color-info-d40: var(--color-info); --color-info-d60: var(--color-info); --color-info-t40: rgba(var(--color-info-rgb), 0.6); --color-info-t60: rgba(var(--color-info-rgb), 0.4); --color-info-t80: rgba(var(--color-info-rgb), 0.2); /* Friendly names for the most used shades */ --color-primary-hover: var(--color-primary-d15); --color-primary-active: var(--color-primary-d20); --color-primary-soft: var(--color-primary-t80); } @supports (color: color-mix(in srgb, #000, #fff)) { :root { --color-primary-d15: color-mix(in srgb, var(--color-primary) 85%, #000); --color-primary-d20: color-mix(in srgb, var(--color-primary) 80%, #000); --color-primary-d25: color-mix(in srgb, var(--color-primary) 75%, #000); --color-primary-d40: color-mix(in srgb, var(--color-primary) 60%, #000); --color-primary-d60: color-mix(in srgb, var(--color-primary) 40%, #000); --color-primary-t20: color-mix(in srgb, var(--color-primary) 80%, #fff); --color-primary-t40: color-mix(in srgb, var(--color-primary) 60%, #fff); --color-primary-t60: color-mix(in srgb, var(--color-primary) 40%, #fff); --color-primary-t70: color-mix(in srgb, var(--color-primary) 30%, #fff); --color-primary-t80: color-mix(in srgb, var(--color-primary) 20%, #fff); --color-accent-d15: color-mix(in srgb, var(--color-accent) 85%, #000); --color-accent-d20: color-mix(in srgb, var(--color-accent) 80%, #000); --color-accent-d25: color-mix(in srgb, var(--color-accent) 75%, #000); --color-accent-d40: color-mix(in srgb, var(--color-accent) 60%, #000); --color-accent-d60: color-mix(in srgb, var(--color-accent) 40%, #000); --color-accent-t40: color-mix(in srgb, var(--color-accent) 60%, #fff); --color-accent-t60: color-mix(in srgb, var(--color-accent) 40%, #fff); --color-accent-t80: color-mix(in srgb, var(--color-accent) 20%, #fff); --color-info-d15: color-mix(in srgb, var(--color-info) 85%, #000); --color-info-d20: color-mix(in srgb, var(--color-info) 80%, #000); --color-info-d25: color-mix(in srgb, var(--color-info) 75%, #000); --color-info-d40: color-mix(in srgb, var(--color-info) 60%, #000); --color-info-d60: color-mix(in srgb, var(--color-info) 40%, #000); --color-info-t40: color-mix(in srgb, var(--color-info) 60%, #fff); --color-info-t60: color-mix(in srgb, var(--color-info) 40%, #fff); --color-info-t80: color-mix(in srgb, var(--color-info) 20%, #fff); } }