/* Colour tokens. The Claude Design reskin replaces the VALUES in this file only — no component CSS or template markup should ever hardcode a colour. Matched to Billy's reference screens (2026-09-22): a white header with icon navigation and a soft active pill, one confident blue for primary actions, grey-headed tables, and small-caps status badges on soft fills. Colours were sampled from the reference, then adjusted only where a text pair fell short of 4.5:1. Four themes. `:root` is Daylight and the fallback for an unknown value; each other theme redefines the SAME token names under [data-theme="..."], which base.njk stamps on from the signed-in user's stored preference, with a matching color-scheme. `npm run check:palette` verifies every text pair (>= 4.5:1) and border/focus pair (>= 3:1) in all four. --chart-1..8 are the SERIES colours, and they are not a per-theme invention. They are one validated categorical palette — eight fixed hues in fixed order — stepped twice: once for a light surface and once for a dark one. Light, Steel and Copper therefore share the light steps; only Dark differs. A theme changes the surface, the ink and the accent; it does NOT get to restyle series identity, because series colour is the reader's only handle on which line is which. Crisp and cohesive (2026-09-22, Billy: the earlier muted, earthy tones did not fit the site). Chart-1 is the site's own brand blue (--brand), and our own series always takes it; the other seven are clean hues at matched lightness around it, in the slot order that scored best on colour-vision separation between neighbours. Values are OPAQUE, so the colour that was validated is the colour that is painted. Re-validate before touching a value (`DATAVIZ_VALIDATOR=… npm run check:palette`), and keep app.js FALLBACK identical to the light steps. chart-qualified / chart-rejected are the review pair (green / light grey). chart-other is the neutral for anything outside the palette. tier-1..4 is an ORDINAL navy ramp. chart-up / chart-down colour sparklines by direction only. Routes emit the token NAME ("chart-1"), never a hex value. --icon-search / --icon-select are the field icons, drawn in each theme's ink-3. --logo-filter lets the dark theme show the client's logo in white. */ /* Daylight — the reference palette: white header, Plex ink, one confident blue. The default, and the one to project. */ :root, [data-theme="light"] { color-scheme: light; /* Ink and paper */ --ink: #111418; --ink-2: #4E545A; --ink-3: #62686E; --paper: #FFFFFF; --paper-2: #F8F9FA; --paper-3: #EEF0F2; --line: #E4E7EA; --line-strong: #878E95; --line-input: #C9CED3; /* Brand, links, focus */ --brand: #065EB3; --brand-ink: #FFFFFF; --brand-soft: #EAF2FB; --brand-hover: #054D93; --link: #065EB3; --focus: #1A6FD1; /* State — reserved for state, never a series. Badges put --ink on the -soft fills */ --state-ok: #1E7446; --state-ok-soft: #DFEEE3; --state-warn: #8A5300; --state-warn-soft: #F6E6CF; --state-error: #B0241B; --state-error-soft: #F9E0DF; --state-info: #245690; --state-info-soft: #E2F0F4; --state-muted: #5A6068; --state-muted-soft: #EDEFF1; --state-ink: #FFFFFF; /* The header bar and its active item */ --bar: #FFFFFF; --bar-ink: #111418; --bar-ink-2: #4E545A; --bar-line: #E4E7EA; --bar-hover: #F3F5F7; --bar-active: #EEF3F8; --bar-active-ink: #065EB3; /* Account avatar, trend lines, platform marks, preview notes */ --avatar: #B2E9F6; --avatar-ink: #0C3A47; --chart-up: #1F9D55; --chart-down: #D64545; --platform-meta: #0866FF; --platform-google: #4285F4; --platform-tiktok: #111111; --platform-linkedin: #0A66C2; --note-bg: #FFF8E6; --note-line: #F3DFAE; --note-ink: #8A5300; /* Chart series (light steps) */ --chart-1: #065EB3; /* Synetic blue */ --chart-2: #2F9D5B; /* green */ --chart-3: #3A9FE0; /* sky */ --chart-4: #E07B22; /* orange */ --chart-5: #0E9F9A; /* teal */ --chart-6: #C99A0E; /* gold */ --chart-7: #D6517A; /* rose */ --chart-8: #7357E8; /* violet */ --chart-qualified: #2F9D5B; --chart-rejected: #A9B1C2; --chart-other: #2F3339; --tier-1: #223876; --tier-2: #405A9B; --tier-3: #617EC2; --tier-4: #84A3EA; /* Field icons and the logo */ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362686E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362686E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --logo-filter: none; } /* Night shift — SyneticUSA navy throughout, for a dim room. Cards stay #0F1A3A: the dark chart steps were blended over it. */ [data-theme="dark"] { color-scheme: dark; /* Ink and paper */ --ink: #E8ECF4; --ink-2: #B4BDCE; --ink-3: #8E99AE; --paper: #0F1A3A; --paper-2: #0A1330; --paper-3: #1B2750; --line: #26335C; --line-strong: #6A78A3; --line-input: #34426E; /* Brand, links, focus */ --brand: #7FB2F0; --brand-ink: #06142E; --brand-soft: #1A2D55; --brand-hover: #A3C8F5; --link: #8DBBF3; --focus: #7FB2F0; /* State — reserved for state, never a series. Badges put --ink on the -soft fills */ --state-ok: #5CCB8A; --state-ok-soft: #12301F; --state-warn: #E0A93A; --state-warn-soft: #3A2A12; --state-error: #FF8A7A; --state-error-soft: #3A1A1D; --state-info: #86B6F2; --state-info-soft: #152A4A; --state-muted: #8E99AE; --state-muted-soft: #1E2849; --state-ink: #06142E; /* The header bar and its active item */ --bar: #0F1A3A; --bar-ink: #FFFFFF; --bar-ink-2: #B4BDCE; --bar-line: #26335C; --bar-hover: #17244A; --bar-active: #1D2D57; --bar-active-ink: #A3C8F5; /* Account avatar, trend lines, platform marks, preview notes */ --avatar: #1F4E5C; --avatar-ink: #CDEFF7; --chart-up: #4CC47F; --chart-down: #FF7B70; --platform-meta: #4D8DFF; --platform-google: #6EA2F7; --platform-tiktok: #F0F0F0; --platform-linkedin: #4A93E0; --note-bg: #2E2512; --note-line: #5A4720; --note-ink: #E0A93A; /* Chart series (dark steps) */ --chart-1: #0E62B8; /* Synetic blue */ --chart-2: #38A461; /* green */ --chart-3: #389DDE; /* sky */ --chart-4: #D87416; /* orange */ --chart-5: #0C938E; /* teal */ --chart-6: #B88C06; /* gold */ --chart-7: #C7436E; /* rose */ --chart-8: #7155E6; /* violet */ --chart-qualified: #38A461; --chart-rejected: #6E7690; --chart-other: #B9BEC6; --tier-1: #B3CAFE; --tier-2: #87A3E4; --tier-3: #647EBC; --tier-4: #435B96; /* Field icons and the logo */ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E99AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E99AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --logo-filter: brightness(0) invert(1); } /* Aluminum — the same layout in neutral graphite, for anyone who wants the blue out of the way. */ [data-theme="steel"] { color-scheme: light; /* Ink and paper */ --ink: #16181B; --ink-2: #474C52; --ink-3: #5E646A; --paper: #FFFFFF; --paper-2: #F5F6F7; --paper-3: #EBEDEF; --line: #E1E4E7; --line-strong: #838990; --line-input: #C6CBD0; /* Brand, links, focus */ --brand: #2E3640; --brand-ink: #FFFFFF; --brand-soft: #ECEEF1; --brand-hover: #1B2027; --link: #2B4E8C; --focus: #2563EB; /* State — reserved for state, never a series. Badges put --ink on the -soft fills */ --state-ok: #1E7446; --state-ok-soft: #E0ECE3; --state-warn: #855000; --state-warn-soft: #F3E6D3; --state-error: #AA2219; --state-error-soft: #F6E1E0; --state-info: #245690; --state-info-soft: #E3EDF2; --state-muted: #575D65; --state-muted-soft: #EBEDEF; --state-ink: #FFFFFF; /* The header bar and its active item */ --bar: #FFFFFF; --bar-ink: #16181B; --bar-ink-2: #474C52; --bar-line: #E1E4E7; --bar-hover: #F2F3F5; --bar-active: #EBEDEF; --bar-active-ink: #16181B; /* Account avatar, trend lines, platform marks, preview notes */ --avatar: #DADDE1; --avatar-ink: #2E3640; --chart-up: #1F9D55; --chart-down: #D64545; --platform-meta: #0866FF; --platform-google: #4285F4; --platform-tiktok: #111111; --platform-linkedin: #0A66C2; --note-bg: #FBF7EC; --note-line: #EADFC2; --note-ink: #855000; /* Chart series (light steps) */ --chart-1: #065EB3; /* Synetic blue */ --chart-2: #2F9D5B; /* green */ --chart-3: #3A9FE0; /* sky */ --chart-4: #E07B22; /* orange */ --chart-5: #0E9F9A; /* teal */ --chart-6: #C99A0E; /* gold */ --chart-7: #D6517A; /* rose */ --chart-8: #7357E8; /* violet */ --chart-qualified: #2F9D5B; --chart-rejected: #A9B1C2; --chart-other: #2F3339; --tier-1: #223876; --tier-2: #405A9B; --tier-3: #617EC2; --tier-4: #84A3EA; /* Field icons and the logo */ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E646A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E646A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --logo-filter: none; } /* Bronze — warm neutrals and a bronze accent. Stays a LIGHT theme: its key is stored per user, and flipping its lightness under a saved preference would surprise whoever chose it. */ [data-theme="copper"] { color-scheme: light; /* Ink and paper */ --ink: #1B1814; --ink-2: #4D463F; --ink-3: #655D55; --paper: #FFFFFF; --paper-2: #FAF8F6; --paper-3: #F0ECE8; --line: #E7E1DB; --line-strong: #8C8279; --line-input: #D3CBC3; /* Brand, links, focus */ --brand: #8A4A1F; --brand-ink: #FFFFFF; --brand-soft: #F7EEE7; --brand-hover: #6E3A17; --link: #8A4A1F; --focus: #2563EB; /* State — reserved for state, never a series. Badges put --ink on the -soft fills */ --state-ok: #3A6E22; --state-ok-soft: #E6EFDD; --state-warn: #845D00; --state-warn-soft: #F6ECD2; --state-error: #A3301D; --state-error-soft: #F8E3DE; --state-info: #2B6474; --state-info-soft: #DFECEF; --state-muted: #635C54; --state-muted-soft: #EFEBE7; --state-ink: #FFFFFF; /* The header bar and its active item */ --bar: #FFFFFF; --bar-ink: #1B1814; --bar-ink-2: #4D463F; --bar-line: #E7E1DB; --bar-hover: #F7F3F0; --bar-active: #F6EEE8; --bar-active-ink: #8A4A1F; /* Account avatar, trend lines, platform marks, preview notes */ --avatar: #F2DCC8; --avatar-ink: #5A2F12; --chart-up: #3F8F2F; --chart-down: #C8452F; --platform-meta: #0866FF; --platform-google: #4285F4; --platform-tiktok: #111111; --platform-linkedin: #0A66C2; --note-bg: #FCF6E8; --note-line: #EEDDB5; --note-ink: #845D00; /* Chart series (light steps) */ --chart-1: #065EB3; /* Synetic blue */ --chart-2: #2F9D5B; /* green */ --chart-3: #3A9FE0; /* sky */ --chart-4: #E07B22; /* orange */ --chart-5: #0E9F9A; /* teal */ --chart-6: #C99A0E; /* gold */ --chart-7: #D6517A; /* rose */ --chart-8: #7357E8; /* violet */ --chart-qualified: #2F9D5B; --chart-rejected: #A9B1C2; --chart-other: #2F3339; --tier-1: #223876; --tier-2: #405A9B; --tier-3: #617EC2; --tier-4: #84A3EA; /* Field icons and the logo */ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23655D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23655D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --logo-filter: none; }