/* ============================================================================ Iteas Hub — Design Tokens ---------------------------------------------------------------------------- Single source of truth for all colors, typography, spacing and radii. Load this BEFORE any component CSS. Components reference these variables only and must never hard-code a value a token exists for. Apply three classes to the root element (e.g. ): theme-dark | theme-light → neutral / surface / text ramp density-dense | density-calm → radii, spacing, type-scale, default font accent-cyan | accent-violet | accent-blue | accent-green | accent-amber | accent-magenta Defaults recommended: theme-light density-dense accent-cyan (Calm density pairs naturally with accent-violet, but any combo is valid.) Colors are authored in oklch on purpose: keep the neutral ramp perceptually even and let accents share chroma/lightness while varying hue. ========================================================================== */ /* --------------------------------------------------------------------------- Web fonts — self-host in production; this Google import is fine for dev. Weights: IBM Plex Sans 400-700, Hanken Grotesk 400-800, Source Sans 3 400-700, Atkinson Hyperlegible 400/700, JetBrains Mono 400-600. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* --------------------------------------------------------------------------- Theme-independent tokens (set once on :root) --------------------------------------------------------------------------- */ :root { /* Semantic status colors — identical in both themes */ --green: oklch(0.74 0.15 155); /* healthy / success / connected / running */ --amber: oklch(0.80 0.13 75); /* warning / drift / degraded / pending */ --red: oklch(0.65 0.20 22); /* failed / escalated / down */ --blue: oklch(0.72 0.13 245); /* in-progress / informational */ --violet: oklch(0.66 0.16 290); /* review / secondary category */ /* Monospace stack — IDs, hostnames, IPs, timestamps, metrics, micro-labels */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Motion */ --dur-fast: .12s; /* control state changes */ --dur-panel: .16s; /* sidebar width / panel entrance */ --dur-bar: .4s; /* progress-bar width */ --ease: cubic-bezier(.2, .0, .2, 1); } /* =========================================================================== THEME — neutral, surface and text ramp =========================================================================== */ .theme-dark { --bg: oklch(0.168 0.008 255); --surface: oklch(0.205 0.01 255); --surface-2: oklch(0.235 0.011 255); --surface-3: oklch(0.275 0.012 255); --border: oklch(0.30 0.011 255); --border-2: oklch(0.375 0.012 255); --text: oklch(0.96 0.004 255); --dim: oklch(0.745 0.009 255); --faint: oklch(0.565 0.009 255); /* Table texture — subtle structure so data tables read as a tool, not paper */ --table-head-bg: oklch(0.245 0.011 255); /* header band fill (~surface-2/3) */ --row-alt: oklch(0.222 0.010 255); /* zebra: every other body row */ --col-divider: oklch(0.265 0.011 255); /* thin vertical column separator */ /* alpha used to derive --accent-soft (see accent classes) */ --accent-soft-alpha: 0.17; /* scrim for modals / drawers */ --scrim: oklch(0.10 0.01 255 / 0.55); color-scheme: dark; } .theme-light { --bg: oklch(0.964 0.004 255); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.004 255); --surface-3: oklch(0.94 0.006 255); --border: oklch(0.905 0.006 255); --border-2: oklch(0.84 0.008 255); --text: oklch(0.235 0.012 255); --dim: oklch(0.46 0.011 255); --faint: oklch(0.615 0.009 255); /* Table texture — subtle structure so data tables read as a tool, not paper */ --table-head-bg: oklch(0.965 0.004 255); /* header band fill (light gray) */ --row-alt: oklch(0.977 0.003 255); /* zebra: every other body row */ --col-divider: oklch(0.912 0.005 255); /* thin vertical column separator */ --accent-soft-alpha: 0.13; --scrim: oklch(0.55 0.02 255 / 0.35); color-scheme: light; } /* =========================================================================== DENSITY — radii, spacing, type-scale, default UI font =========================================================================== */ .density-dense { --font: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif; --radius: 4px; --radius-sm: 2px; --pad-card: 10px; --row-pad: 5px; --content-pad: 12px; --content-padx: 16px; --card-gap: 7px; --kpi-size: 23px; --sec-pad: 9px; --nav-pad: 5px 9px; --topbar-h: 48px; --table-page-size: 12; /* advisory: rows per page in data tables */ } .density-calm { --font: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif; --radius: 11px; --radius-sm: 7px; --pad-card: 22px; --row-pad: 14px; --content-pad: 26px; --content-padx: 28px; --card-gap: 16px; --kpi-size: 31px; --sec-pad: 15px; --nav-pad: 9px 11px; --topbar-h: 58px; --table-page-size: 8; } /* =========================================================================== ACCENT — one active accent at a time. Each defines --accent, --accent-text (foreground on accent) and --accent-soft (low-alpha accent for active-nav bg, selected states, focus fills). --accent-soft uses --accent-soft-alpha from the active theme. =========================================================================== */ .accent-cyan { --accent: oklch(0.70 0.135 232); --accent-text: oklch(0.16 0.02 255); --accent-soft: oklch(0.70 0.135 232 / var(--accent-soft-alpha)); } .accent-violet { --accent: oklch(0.585 0.17 288); --accent-text: oklch(0.99 0 0); --accent-soft: oklch(0.585 0.17 288 / var(--accent-soft-alpha)); } .accent-blue { --accent: oklch(0.60 0.16 258); --accent-text: oklch(0.99 0 0); --accent-soft: oklch(0.60 0.16 258 / var(--accent-soft-alpha)); } .accent-green { --accent: oklch(0.66 0.15 158); --accent-text: oklch(0.16 0.02 255); --accent-soft: oklch(0.66 0.15 158 / var(--accent-soft-alpha)); } .accent-amber { --accent: oklch(0.77 0.14 76); --accent-text: oklch(0.16 0.02 255); --accent-soft: oklch(0.77 0.14 76 / var(--accent-soft-alpha)); } .accent-magenta { --accent: oklch(0.62 0.20 350); --accent-text: oklch(0.99 0 0); --accent-soft: oklch(0.62 0.20 350 / var(--accent-soft-alpha)); } /* =========================================================================== OPTIONAL FONT OVERRIDE — one of the user-selectable UI fonts (§3), applied on top of the density's own default --font. Omit the class entirely to keep that default. =========================================================================== */ .font-ibm-plex-sans { --font: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif; } .font-hanken-grotesk { --font: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif; } .font-source-sans-3 { --font: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif; } .font-atkinson-hyperlegible { --font: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, sans-serif; } /* =========================================================================== Base resets + global element styling =========================================================================== */ * { box-sizing: border-box; } html { margin: 0; height: 100%; /* Single fluid, scalable base — the whole UI sizes off this in rem. Bump this (or the user's browser base / zoom) and everything rescales. */ font-size: clamp(14px, 0.6vw + 12px, 18px); } body { margin: 0; height: 100%; } /* Named type-scale (rem off the fluid base). Components reference these — never a raw px font-size. Reference px targets (at default base) in guide §3. */ :root { --fs-micro: 0.68rem; /* mono uppercase micro-labels (floor ~9px) */ --fs-caption: 0.78rem; /* captions / sub-lines */ --fs-body: 0.88rem; /* default UI / cell text */ --fs-body-lg: 0.94rem; /* emphasised body */ --fs-h2: 0.95rem; /* section headings */ --fs-kpi: 1.6rem; /* big KPI values (scales with density too) */ } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Links — never leave these browser-default blue. */ a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } /* Keyboard focus ring for every interactive element */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* --------------------------------------------------------------------------- Utility: the signature uppercase-mono micro-label (column headers, field labels, meta keys). Apply via class or copy the rules. --------------------------------------------------------------------------- */ .micro-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } /* =========================================================================== Keyframes =========================================================================== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes slideup { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideright { from { transform: translateX(30px); opacity: .5; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }