/* Brand tokens for getduality.com and help.getduality.com. SNAPSHOT of /root/client-dashboard/public/theme.css at dashboard commit caa0b92 (the first :root block and the [data-theme="dark"] block; dashboard-only tokens are not copied). Do not edit by hand and do not read the dashboard file at build time: re-sync deliberately with scripts/sync-tokens.mjs when the dashboard look changes. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap"); :root { /* ---- Duality brand ---- The three colours off the logo. These own the chrome: the rail, the tints, the buttons. They stay out of the data palette below, so a client accent override can never change what a chart colour means. */ --onyx: #343839; --green: #4BE891; --purple: #6F8EFF; /* Cooled a touch from neutral grey. White cards need a page that is slightly blue to read as floating, rather than as a panel cut out of the background. */ --paper: #E9EDF2; --surface: #FFFFFF; --card: #FFFFFF; --rail: #2C3031; --rail-ink: #FFFFFF; --rail-muted: rgba(255, 255, 255, 0.52); /* Solid, not translucent. A see-through stroke doubles up wherever two lines of an icon cross, so the joins show. This is the same grey the old 52% white made on the rail, baked in. If the rail colour changes, recompute this with it. */ --rail-icon: #9A9C9D; --ink: #16191C; --muted: #6B7278; --faint: #949BA1; --rule: #E4E8EC; --rule-soft: #EFF2F5; /* Tinted tiles, straight off the brand. Named by what they are rather than by what they hold, so the same three can be reassigned as the report grows. Dusty pastels, picked by hand for this theme rather than reused from dark mode — earlier passes (a light wash, dark mode's own full-saturation colours, and one round of these dusty pastels) were each tried and refined before landing here. Checked with a WCAG contrast script against --tint-ink, not eyeballed: the lowest of the three (purple) still clears 8.5:1. */ --tint-mint: #A8D9C0; --tint-lilac: #B9ACE8; --tint-sand: #E6C477; --tint-ink: #16191C; /* The table's active-column highlight. Its own token rather than an alias for --tint-lilac, same reasoning dark mode already uses below: a whole highlighted column in the same colour as the tint tiles fights with the numbers in it. A translucent neutral instead — --ink at low alpha over the light card — visibly a highlighted column without competing for attention. */ --table-active: rgba(22, 25, 28, 0.07); --row-stroke: #2C3031; /* outline round the row under the pointer */ /* Secondary text sitting on a tint background — a tile's label, or the average-position banner's caption. Cannot reuse the page's own --muted (#6B7278) any more: contrast against these tints is too weak for text that size. This is a dedicated dark grey, close to --tint-ink but a shade lighter so it still reads as secondary text, checked against all three tints (worst case, purple again, clears 7.0:1). */ --tint-muted: #252A2C; /* Frosted surfaces. --surface stays opaque because it doubles as a text colour on dark tiles, where translucency would just dim the type. Anything that is a *panel* uses these. Three weights so a hovered row inside a highlighted column still reads as hovered: the two stack, and identical values would cancel each other out. */ --glass: rgba(255, 255, 255, 0.55); --glass-strong: rgba(255, 255, 255, 0.85); --glass-edge: rgba(255, 255, 255, 0.70); /* One shadow for anything that lifts off the page, a heavier one for menus that genuinely float above the content rather than sitting in it. Two values, not one per component. */ --lift: 0 1px 2px rgba(20, 26, 34, 0.04), 0 8px 24px rgba(20, 26, 34, 0.06); --lift-high: 0 12px 36px rgba(20, 26, 34, 0.14); /* The dropdown arrow, drawn to match the site switcher's. An image cannot read a CSS colour variable, so the colour is written into it: --muted in each theme. Change both if --muted changes. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --r-card: 18px; --r-tile: 14px; --r-control: 10px; --page1: #1F7A4C; --page2: #D99A2B; --page3: #C4503C; --page4: #C9CFD3; --page5: #B0B8BD; --none: #8E979D; --up: #1F7A4C; --down: #C4503C; --up-bg: #E7F2EC; --down-bg: #F9EAE7; /* The notification bell's unread badge. One value for both themes, not redefined below like --down is: the rail it sits on is dark near-black in both (--rail: #2C3031 light, #1D2225 dark), so the same red keeps 4.9:1 against the white count inside it either way. Checked with a WCAG contrast script, not eyeballed. */ --notify-badge: #C4453D; /* Used only by the background wash. */ --brand-a: #4BE891; --brand-b: #6F8EFF; --blob-alpha: 0.10; --blob-blur: 90px; --blob-size: clamp(260px, 30vw, 520px); } [data-theme="dark"] { --paper: #101316; --surface: #191D21; --card: #191D21; --rail: #1D2225; --rail-ink: #F3F6F8; --rail-muted: rgba(255, 255, 255, 0.45); --rail-icon: #838587; --ink: #E7EBED; --muted: #99A2A8; --faint: #6E777D; /* Raised from the first pass: at the old values (#272D33 and #1E2429) a border and a card were 1.2:1 apart — under WCAG's own 3:1 floor for a UI boundary, so a table edge or a hover wash read as almost the same grey as the surface around it. rule now clears 1.8:1, rule-soft a softer but still real 1.35:1, and rule stays the bolder of the two either way. */ --rule: #404954; --rule-soft: #2E353D; /* Third pass. The muted slate-blue fixed the contrast and the shouting, but read as flat and grey once it was sitting next to real content again. Reference: a dark dashboard whose tiles use fully saturated flat colour — amber, violet, lime — with dark text on top rather than white, which is what makes saturated colour survive on a near-black page without turning into a neon glow. Same idea here, in this app's own green / purple / amber tint families rather than copied hues, and --tint-ink flips to a dark colour to go with them. */ --tint-mint: #34D399; --tint-lilac: #B49CFC; --tint-sand: #F0B94A; --tint-ink: var(--onyx); /* --muted itself stays light in this theme, for the ink-on-card text it is normally used for — so a tile's label needs its own dark value rather than inheriting that one. */ --tint-muted: #4A5051; /* The active-column highlight is deliberately NOT one of the tints above — full-saturation colour works on a small tile, but wash the same colour down an entire table column and it fights with the numbers instead of framing them. A neutral light grey instead: still clearly a highlighted column (2.7:1 against the card), without competing for attention. */ --table-active: #5A626C30; --row-stroke: #AEB6BC; /* light on dark, so the outline still reads */ /* Far lower on dark. White at 25% over near-black is a grey panel, not a frosted one — the eye reads lightness, not opacity. */ --glass: rgba(255, 255, 255, 0.06); --glass-strong: rgba(255, 255, 255, 0.12); --glass-edge: rgba(255, 255, 255, 0.13); /* Shadows do almost nothing on near-black, so cards separate with a hairline instead. That is why --rule carries more weight in this theme than in the light one. */ --lift: 0 1px 2px rgba(0, 0, 0, 0.40); --lift-high: 0 12px 36px rgba(0, 0, 0, 0.55); --page1: #3FA972; --page2: #E5B052; --page3: #D96D57; /* A ramp of greys is only readable if the steps between them are as deliberate as the steps between the colours above it. The first pass put none/page5/page4 at 1.36/1.68/2.16:1 against the card — page4 was fine, but none and page5 sat in the same near-invisible band as the borders and tints above, so an empty bucket's bar or legend dot vanished into the row it was sitting on. Now: 2.0 / 2.6 / 3.6:1, each step clearly apart from the last and from --rule-soft, the track most of these sit on. */ --page4: #647682; --page5: #546069; --none: #464E53; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399A2A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --up: #3FA972; --down: #D96D57; --up-bg: #16291F; --down-bg: #2A1A17; /* A bright colour on near-black paper reads as a glow long before it reads as a tint, so it needs less than the light theme, not more. */ --blob-alpha: 0.08; --blob-blur: 100px; }