/* ========================================================================== Design tokens — Green Tech Official -------------------------------------------------------------------------- Every colour is stored as a space-separated RGB triplet so Tailwind can apply alpha at will (`rgb(var(--gt-primary) / 0.12)`), and so switching themes is a single class change on instead of a second colour scale. Naming is by ROLE, never by hue. `--gt-danger` stays meaningful if the brand ever moves off red; `--gt-red` would not. ========================================================================== */ :root { color-scheme: light; /* --- Surfaces ------------------------------------------------------- */ --gt-canvas: 246 247 249; /* app background — cool, very light gray */ --gt-surface: 255 255 255; /* cards, tables, panels */ --gt-raised: 255 255 255; /* popovers, modals (elevated above cards) */ --gt-hairline: 226 232 240; /* 1px separators — the primary structure */ --gt-inset: 248 250 252; /* table headers, wells, disabled fields */ /* --- Text ----------------------------------------------------------- */ --gt-ink: 15 23 42; /* primary text */ --gt-muted: 100 116 139; /* secondary text, labels */ --gt-faint: 148 163 184; /* tertiary text, placeholders, timestamps */ /* --- Brand & intent ------------------------------------------------- Blue leads all interactive affordances (per brief). Green is reserved for charge/health/success so it keeps its meaning on the workshop floor, where "green" must always mean "this pack is good". */ --gt-primary: 37 99 235; --gt-primary-strong: 29 78 216; --gt-primary-soft: 239 246 255; --gt-success: 22 163 74; --gt-success-soft: 240 253 244; --gt-warn: 217 119 6; --gt-warn-soft: 255 251 235; --gt-danger: 220 38 38; --gt-danger-soft: 254 242 242; --gt-info: 2 132 199; --gt-info-soft: 240 249 255; --gt-charge: 5 150 105; /* cell-health / battery gauge accent */ /* --- Geometry ------------------------------------------------------- */ --gt-radius-sm: 8px; --gt-radius: 12px; --gt-radius-lg: 16px; --gt-radius-full: 999px; /* --- Layout metrics (read by JS for sticky offsets) ------------------ */ --gt-sidebar-w: 264px; --gt-sidebar-w-collapsed: 72px; --gt-topbar-h: 60px; /* --- Motion --------------------------------------------------------- One easing curve for the whole product. Consistency of motion is what makes an interface feel engineered rather than assembled. */ --gt-ease: cubic-bezier(0.22, 1, 0.36, 1); --gt-dur-fast: 120ms; --gt-dur: 180ms; --gt-dur-slow: 260ms; /* --- Elevation ------------------------------------------------------ */ --gt-shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06); --gt-shadow-lift: 0 4px 12px rgb(15 23 42 / 0.06), 0 2px 4px rgb(15 23 42 / 0.04); --gt-shadow-pop: 0 12px 32px rgb(15 23 42 / 0.12), 0 2px 8px rgb(15 23 42 / 0.08); /* --- Chart series --------------------------------------------------- Six fixed categorical slots, assigned in order and never cycled. A seventh series folds into `--gt-chart-other` rather than inventing a hue — six is the largest set that clears colour-vision separation on this surface. These values are computed, not chosen by eye: each is a brand hue (blue · amber · emerald · violet · rose · cyan) snapped to a lightness inside the light-mode band, then verified with the data-viz validator. Worst adjacent pair, deuteranopia: ΔE 20.2 (target ≥ 8) Worst adjacent pair, normal vision: ΔE 23.3 (floor 15) One slot sits just under 3:1 against white, so every chart ships a legend, direct labels and a table view rather than relying on fill contrast alone. */ --gt-chart-1: #275ac8; /* blue */ --gt-chart-2: #905114; /* amber */ --gt-chart-3: #2ab985; /* emerald */ --gt-chart-4: #815fd9; /* violet */ --gt-chart-5: #a00c53; /* rose */ --gt-chart-6: #0ca2c6; /* cyan */ --gt-chart-other: #94a3b8; --gt-chart-grid: rgb(226 232 240 / 0.9); --gt-chart-tick: #64748b; } .dark { color-scheme: dark; --gt-canvas: 11 18 32; --gt-surface: 19 28 46; --gt-raised: 25 35 55; --gt-hairline: 36 48 68; --gt-inset: 15 23 39; --gt-ink: 226 232 240; --gt-muted: 148 163 184; --gt-faint: 100 116 139; --gt-primary: 96 165 250; --gt-primary-strong: 147 197 253; --gt-primary-soft: 23 42 74; --gt-success: 52 211 153; --gt-success-soft: 15 46 42; --gt-warn: 251 191 36; --gt-warn-soft: 56 41 12; --gt-danger: 248 113 113; --gt-danger-soft: 60 22 25; --gt-info: 56 189 248; --gt-info-soft: 12 42 60; --gt-charge: 52 211 153; --gt-shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.24); --gt-shadow-lift: 0 4px 12px rgb(0 0 0 / 0.36), 0 2px 4px rgb(0 0 0 / 0.24); --gt-shadow-pop: 0 12px 32px rgb(0 0 0 / 0.50), 0 2px 8px rgb(0 0 0 / 0.36); /* Dark is selected, not flipped: the same six hues re-snapped to the dark band and re-validated against the dark chart surface (#131C2E). Worst adjacent pair, deuteranopia: ΔE 16.4 · normal vision: ΔE 18.3 */ --gt-chart-1: #2f5dbd; --gt-chart-2: #905114; --gt-chart-3: #0dac79; --gt-chart-4: #7457c2; --gt-chart-5: #a62f5e; --gt-chart-6: #0ca2c6; --gt-chart-other: #64748b; --gt-chart-grid: rgb(36 48 68 / 0.9); --gt-chart-tick: #94a3b8; } /* Density preference — set by Settings › Appearance. Compact fits ~30% more rows on the 1366×768 laptops used at the service counters. */ :root[data-density='compact'] { --gt-row-py: 0.4rem; --gt-card-p: 1rem; } :root { --gt-row-py: 0.625rem; --gt-card-p: 1.25rem; }