/* ===================================================================== IOX Graphite - design tokens. Split out of style.css so a page can take the palette WITHOUT the portal's component rules. login.html needs exactly that: it carries its own .auth-* styling, and style.css has .auth-* rules of its own from an older sign-in design that leaked in (a stray text-align centred the brand copy). style.css imports this file, so the tokens are still defined in exactly one place. ===================================================================== */ /* ===================================================================== IOX Graphite - design tokens Replace section 1 DESIGN TOKENS in assets/css/style.css with this block. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* --- action ------------------------------------------------------- The primary button. It is the brightest surface on the screen and deliberately carries no hue - that is what frees the rest to mean something. There is exactly one per view. */ --ac-fill: #E9EAEC; --ac-hover: #FFFFFF; --ac-ink: #0F1011; /* --- brand -------------------------------------------------------- Steel is the system talking. Ochre is the thing that needs a person. */ --br-600: #47759F; --br-500: #5988B4; --br-400: #6E9BC4; --br-300: #8FB0CF; --br-tint: rgba(89,136,180,0.15); --br-glow: rgba(89,136,180,0.30); --sg-500: #BC7B44; --sg-400: #CB8C55; --sg-tint: rgba(188,123,68,0.15); /* --- ground ------------------------------------------------------- */ --bg-base: #0F1011; --bg-rail: #0A0B0C; --bg-surface: #16181A; --bg-raised: #1D2023; --bg-overlay: #262A2E; /* --- text --------------------------------------------------------- */ --tx-primary: #E9EAEC; --tx-secondary: #979BA1; --tx-tertiary: #62666C; --tx-inverse: #0F1011; /* --- border ------------------------------------------------------- */ --bd-subtle: rgba(255,255,255,0.055); --bd-default: rgba(255,255,255,0.10); --bd-strong: rgba(255,255,255,0.18); /* --- semantic ----------------------------------------------------- */ --se-ok: #4E9B72; --se-warn: #C4964A; --se-crit: #C0564F; --se-info: #5988B4; /* Status INK for tinted pills. A status colour used as both the wash and the ink on that wash lands near 2.8:1 — under the floor for text you read to act. These are the same four hues one step lighter, for use on their own tint. */ --se-ok-ink: #7CBE9B; --se-warn-ink: #D9AC6B; --se-crit-ink: #D98B85; --sg-ink: #D79A66; /* Brand ink for text sitting on --br-tint (active nav, brand pills). Same reasoning as the status inks above: the tint is nearly the page colour, so the ink has to move away from it, and which direction that is flips with the theme. */ --br-on-tint: #8FB0CF; /* Ink on a solid brand FILL (primary buttons, active tabs). The fill is a mid blue in both themes, so this stays white in both — unlike --tx-primary, which flips to near-black in light and left those buttons at 2.8:1. */ --br-on-fill: #FFFFFF; /* --- shape, depth, motion ----------------------------------------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px; --el-1: 0 1px 0 rgba(0,0,0,0.45); --el-2: 0 6px 18px -6px rgba(0,0,0,0.65); --el-3: 0 28px 56px -20px rgba(0,0,0,0.8); --ring: 0 0 0 3px var(--br-glow); --mo-fast: 120ms; --mo-base: 180ms; --mo-slow: 260ms; --ease: cubic-bezier(.2,.8,.3,1); /* --- space -------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10:40px; --sp-14:56px; --sp-18:72px; /* --- type --------------------------------------------------------- */ --f-disp: 'Archivo', system-ui, sans-serif; --f-ui: 'Public Sans', system-ui, -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ================================================================= Legacy aliases - every existing rule in the portal keeps working. Do not write new rules against these; use the tokens above. ================================================================= */ --primary-color: var(--br-500); --primary-hover: var(--br-400); --primary-dark: var(--br-600); --primary-light: var(--br-tint); --primary-glow: var(--br-glow); --brand-accent: var(--sg-500); --brand-accent-h: var(--sg-400); --success-color: var(--se-ok); --warning-color: var(--se-warn); --danger-color: var(--se-crit); --info-color: var(--se-info); --bg-color: var(--bg-base); --bg-secondary: var(--bg-rail); --surface-color: var(--bg-surface); --surface-solid: var(--bg-surface); --surface-hover: var(--bg-raised); --surface-2: var(--bg-raised); --surface-3: var(--bg-overlay); --text-main: var(--tx-primary); --text-muted: var(--tx-secondary); --text-dim: var(--tx-tertiary); --text-inverse: var(--tx-inverse); --border-color: var(--bd-default); --border-subtle: var(--bd-subtle); --border-strong: var(--bd-strong); --sidebar-bg: var(--bg-rail); --sidebar-text: #A8ACB2; --sidebar-muted: var(--tx-secondary); --sidebar-dim: var(--tx-tertiary); --sidebar-hover: rgba(255,255,255,0.05); --sidebar-active: var(--br-500); --sidebar-border: var(--bd-default); --sidebar-width: 60px; --font-family: var(--f-ui); --font-display: var(--f-disp); --font-mono: var(--f-mono); --border-radius: var(--r-sm); /* ================================================================= Extended legacy aliases. The handoff's alias list maps the colour, font and radius names but stops there. The portal also has 285 live uses of the type, space, shadow, glow and transition scales across style.css, cio.css, fluent.css, qb-portal.css and inline page styles. An undefined custom property is invalid at computed-value time, so `padding: var(--space-4)` would resolve to 0 and every panel in the app would collapse. They are mapped here rather than left to fail. Sizes keep their existing values: they carry no brand meaning, and holding them steady is what lets the re-skin land without reflowing 29 pages. Radii and shadows DO move onto the new scale — that square, flatter feel is the visible half of Graphite. ================================================================= */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-8: var(--sp-8); --space-10: var(--sp-10); --space-12: 48px; /* Graphite is a square system: the old 6/10/14/20 ladder folds onto 2/4/6. */ --radius-sm: var(--r-sm); --radius-lg: var(--r-md); --radius-xl: var(--r-md); --radius-full: var(--r-pill); --shadow-sm: var(--el-1); --shadow-md: var(--el-2); --shadow-lg: var(--el-2); --shadow-xl: var(--el-3); --glow: var(--ring); --glow-brand: var(--ring); --transition: all var(--mo-fast) var(--ease); } /* ===================================================================== LIGHT THEME Set by assets/js/theme.js as data-theme="light" on . Only the tokens that carry the palette are redefined — shape, space, type and motion are theme-independent, and every legacy alias above is declared with var(), so it re-resolves here for free. That is what lets one block re-skin 29 pages. This is a designed light palette, not an inversion: · the page ground is a light grey and cards are white, so panels still separate from the page the way --bg-surface separates from --bg-base in the dark theme; · borders switch from white-alpha to black-alpha, or they vanish; · the action button flips (dark fill / light ink) to stay the single brightest-contrast element in the view; · brand and status hues step DARKER, because the same mid-tone that reads clearly on #0F1011 falls under 4.5:1 on white; · the *-ink tokens exist to sit on their own tint, so in light they go darker rather than lighter. ===================================================================== */ :root[data-theme="light"]{ /* --- action: dark pill on a light page --- */ --ac-fill: #16181A; --ac-hover: #000000; --ac-ink: #FFFFFF; /* --- brand: one step darker so it holds contrast on white --- */ --br-600: #2E4F6E; --br-500: #3A6489; --br-400: #47759F; --br-300: #5988B4; --br-tint: rgba(58,100,137,0.10); --br-glow: rgba(58,100,137,0.28); /* Ochre and the status hues double as ink on their own tint in a few pills, so they carry the 4.5:1 floor themselves rather than only being fills. */ --sg-500: #8A5424; --sg-400: #A2672F; --sg-tint: rgba(138,84,36,0.12); /* --- ground: grey page, white panels --- */ --bg-base: #F1F3F5; --bg-rail: #FFFFFF; --bg-surface: #FFFFFF; --bg-raised: #F1F3F5; --bg-overlay: #E6E9EC; /* --- text --- */ --tx-primary: #16181A; --tx-secondary: #565C64; /* Tertiary still has to clear 4.5:1 on white — the dark theme's step down lands at 3.5:1 here, which is where kpi captions became unreadable. */ --tx-tertiary: #6B7078; --tx-inverse: #FFFFFF; /* --- border: black-alpha, or nothing shows on white --- */ --bd-subtle: rgba(0,0,0,0.06); --bd-default: rgba(0,0,0,0.12); --bd-strong: rgba(0,0,0,0.22); /* --- semantic --- */ --se-ok: #2A6E49; --se-warn: #855C18; --se-crit: #A5332C; --se-info: #3A6489; --se-ok-ink: #1F6644; --se-warn-ink: #7A5414; --se-crit-ink: #8E2820; --sg-ink: #83501F; --br-on-tint: #2E4F6E; /* --- depth: the dark theme's shadows are near-black and would smear --- */ --el-1: 0 1px 0 rgba(0,0,0,0.05); --el-2: 0 6px 18px -6px rgba(0,0,0,0.14); --el-3: 0 28px 56px -20px rgba(0,0,0,0.20); /* --- sidebar --- */ --sidebar-text: #464C54; --sidebar-hover: rgba(0,0,0,0.05); } /* --- base ---------------------------------------------------------- */ html{color-scheme:dark} html[data-theme="light"]{color-scheme:light} body{ background:var(--bg-base); color:var(--tx-primary); font-family:var(--f-ui); font-size:13px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{font-family:var(--f-disp);font-weight:800;letter-spacing:-.02em;line-height:1.12} .num,.amount,td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}