/* Design tokens — the "Control Room" direction. This is the only stylesheet in the project allowed to contain a colour literal. Everything else references these custom properties, which is what keeps one accent, one set of contrast tiers and one rhythm across the site; a test fails the image build if a hex or rgb() value appears in base.css or landing.css. The theme is dark-only on purpose. The page paints --bg on and declares color-scheme: dark, so a light-preference operating system cannot flash a white page before the rest of the stylesheet arrives. */ :root { color-scheme: dark; /* Surfaces, one step apart. --panel-sunk is for content that sits inside a surface: inputs, terminals, meter tracks. */ --bg: #0b0f14; --bg-alt: #0e141b; --panel: #121821; --panel-header: #172030; --panel-sunk: #080c11; /* One hairline for separators, one stronger line for interactive outlines (at least 3:1 against the surface it sits on). */ --border: #24303f; --border-strong: #6b7f98; /* A single accent hue, spent deliberately: the primary action, links, the active navigation marker, section numerals, the meter fill and focus. */ --accent: #35d0ba; --accent-hover: #2bb9a5; --accent-ink: #07110f; --accent-wash: rgba(53, 208, 186, 0.14); /* Signals are semantic, and are never the only thing carrying a meaning: every status also renders its own word. */ --signal-ok: #4ade80; --signal-warn: #f5b23e; --signal-alert: #f26d6d; --signal-idle: #7c8ca0; --signal-ok-wash: rgba(74, 222, 128, 0.13); --signal-warn-wash: rgba(245, 178, 62, 0.13); --signal-alert-wash: rgba(242, 109, 109, 0.13); --signal-idle-wash: rgba(124, 140, 160, 0.13); /* Contrast tiers, not legibility tiers: all three clear 4.5:1 on --bg and on --panel. De-emphasis comes from size and weight instead. */ --text-1: #e6edf5; --text-2: #a9b7c6; --text-3: #8a99ab; --focus: #7ce4d2; --grid-line: rgba(230, 237, 245, 0.05); --grid-mask: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0)); --scrim: rgba(11, 15, 20, 0.86); /* Two families, both system stacks. There is no @font-face and no network font request, because the site renders identically with the cable pulled. */ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* One modular scale: 12 / 13 / 14 / 16 / 20 / 26 / 34+. Nothing off-scale. */ --fs-micro: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-body: 1rem; --fs-lg: 1.25rem; --fs-title: 1.625rem; --fs-h1: clamp(2rem, 4.4vw, 2.75rem); --fs-mega: clamp(2.15rem, 5vw, 3.5rem); --lh-tight: 1.15; --lh-head: 1.3; --lh-body: 1.6; /* A 4px base unit; every margin and pad in the project comes from here. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --gutter: 16px; --maxw: 1120px; --narrow: 720px; --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --shadow: 0 20px 44px -32px rgba(0, 0, 0, 0.95); } @media (min-width: 640px) { :root { --gutter: 24px; } }