/* ============================================================ tokens.css — Anthoney Q / The Lab — single source of truth ------------------------------------------------------------ The shared design tokens for anthoneyq.com and every tool in The Lab. Values are locked to TOOL-DESIGN-RULES.md so nothing drifts. Link this ONCE in instead of redeclaring :root: Color roles (use them semantically, never decoratively): --blue = action / precision (every primary CTA, always) --green = growth / value (wins, progress, positive proof) --pink = risk / cost (cost-of-inaction, warnings) Self-contained embedded tools keep their own inline :root per TOOL-DESIGN-RULES (they must double-click-preview and iframe cleanly); these values are identical, so they stay in sync. ============================================================ */ :root{ /* Surfaces */ --bg:#0B0D0F; --panel:#14171A; --glass:rgba(255,255,255,0.045); --glass-strong:rgba(255,255,255,0.07); --border:#2A2E33; /* Text */ --text:#F5F7FA; --muted:#9AA3AD; --muted-dim:#6B7178; /* Semantic accents */ --blue:#2D8CFF; /* action / precision */ --green:#24C875; /* growth / value */ --pink:#F5166B; /* risk / cost */ /* Accent gradients (for buttons, marks, headline highlights) */ --blue-gradient:linear-gradient(135deg,#3D97FF,#1E6FE0); --green-gradient:linear-gradient(135deg,#2BD982,#15A35F); --text-gradient:linear-gradient(120deg,#fff 30%,#9fc6ff); /* Geometry & motion */ --radius:18px; --maxw:1140px; --ease:cubic-bezier(.22,.61,.36,1); /* Type */ --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif; }