/* ══════════════════════════════════════════════════════════════════ ForestHub console · design tokens One place for colour, type, space, radius, elevation and density. Components read these; nothing downstream hard-codes a value that exists here. Density is a multiplier on --u, set on . ══════════════════════════════════════════════════════════════════ */ :root{ /* ── colour · chrome (sidebar) ── deep graphite with a green cast */ --chrome:#16211E; --chrome-2:#1F2C28; --chrome-3:#2B3A35; --chrome-ink:#F2F6F4; --chrome-dim:#B9C6C0; --chrome-line:rgba(255,255,255,.09); --brand:#17939F; --brand-dk:#0A545C; /* ── colour · workspace ── */ --bg:#E7EBE8; --card:#FFFFFF; --card-2:#F4F6F4; --card-3:#EDF0EE; --line:#D6DCD8; --line-2:#E6EAE7; --line-strong:#B9C3BE; --ink:#121917; --ink-2:#59635F; --ink-3:#5D6762; --ink-4:#AEB7B2; /* ── colour · status ── each with a fill, a stroke and an ink */ --alarm:#CE3B2C; --alarm-bg:#FBECEA; --alarm-ln:#F1CFCA; --alarm-dk:#8E241A; --warn:#C8860D; --warn-bg:#FCF3E2; --warn-ln:#F0DFBD; --warn-dk:#7E540A; --ok:#2E8B5A; --ok-bg:#E8F4ED; --ok-ln:#C9E3D5; --ok-dk:#1D5C3B; --live:#0F7C87; --live-bg:#E5F2F3; --live-ln:#C4E0E3; --live-dk:#0A545C; --hold:#4257B8; --hold-bg:#ECEFFB; --hold-ln:#CFD6F4; --hold-dk:#2C3B80; --focus:0 0 0 3px rgba(15,124,135,.22); /* ── type ── */ --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --cond:"IBM Plex Sans Condensed",var(--sans); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px; --fs-num:28px; --lh-tight:1.2; --lh-snug:1.35; --lh-body:1.55; --lh-loose:1.65; --track-caps:.07em; /* ── space ── a 4px grid, scaled by density */ --u:1; --s-1:calc(4px*var(--u)); --s-2:calc(8px*var(--u)); --s-3:calc(12px*var(--u)); --s-4:calc(16px*var(--u)); --s-5:calc(20px*var(--u)); --s-6:calc(24px*var(--u)); --s-8:calc(32px*var(--u)); --s-12:calc(48px*var(--u)); --gap:var(--s-4); /* between cards */ --pad:var(--s-4); /* inside cards */ --pad-x:var(--s-5); /* page gutter */ /* ── shape ── */ --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* ── elevation ── */ --sh-0:none; --sh:0 1px 2px rgba(18,25,23,.06),0 4px 14px rgba(18,25,23,.06); --sh-lg:0 2px 6px rgba(18,25,23,.08),0 14px 40px rgba(18,25,23,.12); --sh-nav:0 2px 10px rgba(0,0,0,.25); /* ── layout ── */ --nav-w:272px; --nav-w-rail:64px; --header-h:60px; --content-max:1480px; --reading-max:1120px; /* ── motion ── */ --t-fast:.12s; --t:.18s; --ease:cubic-bezier(.2,.7,.2,1); } html[data-theme="dark"]{ --bg:#0F1614; --card:#182220; --card-2:#1E2A27; --card-3:#243230; --line:#2C3B37; --line-2:#26332F; --line-strong:#3E4F4A; --ink:#E9EFEC; --ink-2:#B4C1BB; --ink-3:#83918B; --ink-4:#5E6B66; --alarm:#E0584A; --alarm-bg:#3A1F1B; --alarm-ln:#5A2E28; --alarm-dk:#F3A99E; --warn:#D99A2B; --warn-bg:#3A2D12; --warn-ln:#5A4620; --warn-dk:#F1CB7C; --ok:#43A46F; --ok-bg:#16301F; --ok-ln:#24492F; --ok-dk:#9EDBB5; --live:#2BA3AF; --live-bg:#0F2A2D; --live-ln:#1B4145; --live-dk:#8FD6DD; --hold:#6B7FD6; --hold-bg:#1C2244; --hold-ln:#2C3566; --hold-dk:#B8C3F6; --sh:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3); --sh-lg:0 2px 6px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.5); color-scheme:dark; } html[data-density="compact"]{--u:.75;--fs-num:26px} html[data-density="wall"]{--u:1.3;--fs-md:15px;--fs-sm:14px;--fs-num:40px} html[data-nav="rail"]{--nav-w:var(--nav-w-rail)} @media(prefers-reduced-motion:reduce){:root{--t-fast:0s;--t:0s}}