/* ─── Shared static-page design tokens ───────────────────────────────────── Loaded by every hand-coded HTML page under /public/* (blog, test, terms, privacy-policy, and the programmatic monitoring + "vs" pages). Values mirror the dark-mode tokens in `frontend/src/index.css` so the static pages and the React landing read as one site. All colour values are HSL-space-separated so they drop straight into `hsl(var(--x))` and can be opacity-modified with `hsl(var(--x) / .1)`. If you change a value here, update the matching `:root`/`.dark` token in `frontend/src/index.css` too — they must stay in lock-step. ────────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces — mirror frontend/src/index.css */ --background: 228 14% 7%; --background-sunk: 228 14% 4%; --card: 228 14% 9%; --popover: 228 14% 11%; /* Foreground — mirror frontend/src/index.css */ --foreground: 220 20% 97%; --muted-foreground: 220 10% 55%; /* Borders — mirror frontend/src/index.css */ --border: 225 15% 14%; --border-strong: 225 15% 22%; /* Accent + status — mirror frontend/src/index.css */ --primary: 172 66% 50%; --primary-ink: 172 66% 75%; --success: 152 76% 45%; --warning: 38 95% 55%; --destructive: 0 84% 60%; /* Legacy aliases kept for the existing static pages. New code should use the Tailwind-style names above. These avoid a big search-and- replace across 18 files right now. */ --bg: hsl(var(--background)); --bg-raised: hsl(var(--card)); --bg-sunk: hsl(var(--background-sunk)); --fg: hsl(var(--foreground)); --fg-muted: hsl(220 15% 80%); --fg-dim: hsl(var(--muted-foreground)); --fg-faint: hsl(220 10% 42%); --border-color: hsl(var(--border)); --border-bright: hsl(var(--border-strong)); --accent: hsl(var(--primary)); --accent-ink: hsl(var(--primary-ink)); --accent-soft: hsl(var(--primary) / 0.1); --accent-glow: hsl(var(--primary) / 0.3); --warn: hsl(var(--warning)); --error: hsl(var(--destructive)); /* Shared typography + shape tokens */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --r-sm: 0.375rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-xl: 1rem; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Page-level ambient treatment ───────────────────────────────────────── The landing reads distinctly teal-tinted because every section (HeroSection, FeaturesSection, DashboardPreview, Protocols, CTA, …) has its own `.bg-glow` overlay — radial teal at ~10% opacity. Stacked top to bottom they paint the whole page with an ambient teal wash. The static pages are flat — a single solid --bg — so even though the hex matches, they read as plain dark next to the landing's dimensional dark. To bring them into the same family we paint TWO overlays on : • A full-viewport teal tint (echoing the accumulated per-section glow) • A brighter radial glow at the top (echoing the hero specifically) • A very faint grid texture Painted through `::before` pseudo so none of the 18 static pages need individual changes, and fixed so the effect doesn't scroll away. ────────────────────────────────────────────────────────────────────────── */ body { position: relative; min-height: 100vh; isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* Top radial glow — mirrors HeroSection's centred glow */ radial-gradient(ellipse 80% 55% at 50% 0%, hsl(var(--primary) / 0.14), transparent 55%), /* Page-wide teal wash — mirrors the stacked per-section glow on the landing */ linear-gradient(180deg, hsl(var(--primary) / 0.05) 0%, hsl(var(--primary) / 0.04) 50%, hsl(var(--primary) / 0.05) 100%), /* Subtle grid texture (masked lower on the page by fading via gradient below) */ linear-gradient(hsl(var(--border) / 0.25) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, hsl(var(--border) / 0.25) 1px, transparent 1px) 0 0 / 60px 60px; }