/* ========================================================================== TranXwatch-Solar Console — design tokens Single source of truth for colour, type, space, radius and elevation. Nothing below this file should contain a raw hex value. Colour rules (EEMUA 191 / IEC 62682 discipline): - --cyan is a BRAND accent. It never signals state. - --ok / --warn / --crit signal state. They are never decorative. - Animation means "unacknowledged". Nothing else animates. Contrast: every foreground below is >= 4.5:1 against --navy (WCAG 2.2 AA). --crit is the binding constraint at 4.58:1 — if --navy is lightened further, --crit must lift to #FF6B85 and --muted to #A3B5CE. ========================================================================== */ :root { /* ---- surface ---------------------------------------------------------- */ --navy: #102A52; /* was #0A1B3D — lifted ~35% luminance */ --navy-deep: #0B1F3E; /* page gradient floor */ --navy-sink: #0A1D3A; /* gradient tail */ --field: #0E2449; /* input wells */ --surface-1: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .08); --scrim: rgba(3, 8, 20, .66); /* ---- borders ---------------------------------------------------------- */ /* --line is decorative (table rules, card edges): no WCAG minimum applies. --line-strong bounds anything a person operates: >= 3:1 per WCAG 1.4.11. */ --line: #2E5288; --line-strong: #5A8AD4; /* ---- brand ------------------------------------------------------------ */ --blue: #1565C0; --blue-hover: #1E88E5; --cyan: #4DD0E1; /* ---- text ------------------------------------------------------------- */ --ink: #E8F1FB; /* 12.46:1 on --navy */ --muted: #9FB3D1; /* 5.81:1 on --navy */ --on-accent: #FFFFFF; /* ---- state ------------------------------------------------------------ */ --ok: #3ECF8E; /* 7.13:1 on --navy */ --warn: #F5B301; /* 7.75:1 on --navy */ --crit: #FF5470; /* 4.58:1 on --navy — binding constraint */ /* Wash backgrounds for pills/chips. NOTE these LIGHTEN the ground, so a foreground measured against --navy does not survive on its own wash. */ --ok-wash: rgba(62, 207, 142, .16); --warn-wash: rgba(245, 179, 1, .16); --crit-wash: rgba(255, 84, 112, .16); --info-wash: rgba(77, 208, 225, .16); /* ---- critical: fill vs text ------------------------------------------ A saturated alarm red cannot carry SMALL TEXT on a dark blue ground — its luminance is simply too close. Measured against the grounds text actually sits on (not the page): page .card row:hover own wash --crit #FF5470 4.58 3.95 3.62 3.90 <- fails 4.5 --crit-text #FF8199 6.00 5.18 4.74 4.71 <- passes Nearly every table lives inside .card (a white wash OVER --navy), so the page ratio was never the one that mattered. Lowering the wash alpha does not help either: it asymptotes at 4.58, crit's own ceiling. So the token splits by ROLE, which is what IBM Carbon does in its dark theme (text-error #ff8389) — and it keeps the alarm red vivid where it signals: --crit fills, LEDs, dots, bar segments, chart lines, KPI numerals — graphics and large text, which need only 3:1 (3.95 OK) --crit-text status labels, threshold values, pills — small text. Do NOT use --crit for small text. */ --crit-text: #FF8199; /* ---- chart series ----------------------------------------------------- */ /* Categorical palette for plotted lines. Deliberately avoids --ok / --warn / --crit: a green line on a voltage chart must not read as "healthy". A chart line is a meaningful graphic, so each clears 3:1 on --navy (WCAG 1.4.11). Verified: 7.75 / 5.23 / 7.47 / 5.08 / 6.30. Note --blue #1565C0 is NOT usable here — it measures 2.48:1 on --navy. */ --series-1: #4DD0E1; /* cyan */ --series-2: #A78BFA; /* violet */ --series-3: #F0A6CA; /* pink */ --series-4: #DD8452; /* clay */ --series-5: #8FA9FF; /* periwinkle */ /* ---- type ------------------------------------------------------------- */ /* IBM Plex Sans — drawn by IBM for technical products; its slightly mechanical, engineered letterforms suit an instrument panel far better than a neutral grotesque. Fallbacks match Plex's metrics closely enough that the swap does not reflow tables. See fonts.css. */ --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; /* Type scale. EVERY font-size in the codebase must come from this list — no local px values, and never a half-pixel (10.5/11.5/12.5/13.5 all rasterise inconsistently and were the loudest amateur tell in the old CSS). */ --fs-2xs: 11px; /* uppercase micro-labels (nav group, table headers) */ --fs-xs: 12px; /* captions, hints, legends, pills */ --fs-sm: 13px; /* table body, secondary text */ --fs-md: 14px; /* base UI / body */ --fs-lg: 16px; /* card + section headings */ --fs-xl: 20px; /* view title (h1) */ --fs-2xl: 24px; /* hero */ --fs-3xl: 32px; /* KPI numerals */ /* Line height. One value for everything is a tell: headings need to be tighter than prose, and dense data rows tighter still. */ --lh-tight: 1.2; /* headings, KPI numerals */ --lh-snug: 1.4; /* table rows, dense UI */ --lh-base: 1.55; /* body copy */ /* Letter spacing. Plex is fairly wide; large text benefits from negative tracking, uppercase micro-labels from positive. */ --ls-tight: -.015em; --ls-normal: 0; --ls-caps: .07em; /* ---- space (8px scale) ------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ---- radius ----------------------------------------------------------- */ --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* ---- elevation -------------------------------------------------------- */ --shadow-1: 0 1px 3px rgba(0, 0, 0, .25); --shadow-2: 0 10px 30px rgba(0, 0, 0, .35); /* ---- layout ----------------------------------------------------------- */ --sidebar-w: 260px; }