/* ================================================================ KINETIC DESIGN TOKENS — single source of truth ================================================================ All Verif-AI pages consume this file. To change a colour / spacing: edit HERE ONLY. Pages via _kinetic_head.html partial → tokens arrive automatically. Standalone pages (splash, pricing, login, report…) → in . ================================================================ */ /* Light palette (default) */ :root { /* Paper */ --paper: #f0f6fc; --paper-2: #e2edf8; --paper-3: #d4e5f5; /* Ink */ --ink: #0f1f35; --ink-2: #1e3350; --ink-3: #4a637f; --ink-4: #7d9ab5; /* Rules */ --rule: #b8cfea; --rule-2: #6a8eb0; --rule-strong: #6a8eb0; /* Accent */ --accent: #1e3a5f; --accent-2: #3d6ea8; --accent-warm: #3d6ea8; /* Semantic */ --ok: #2f6847; --warn: #a07830; --bad: #8a2d1f; /* Legacy aliases (kept for backward compat) */ --green: #2f6847; --blue: #1e3a5f; --bg: #f0f6fc; /* Tinted accents — used for chip backgrounds and callout panels. Added 2026-05-11 as part of the v3 terminal-pattern port. */ --ok-tint: rgba(47, 104, 71, 0.10); --warn-tint: rgba(160, 120, 48, 0.12); --bad-tint: rgba(138, 45, 31, 0.10); --blue-tint: rgba(30, 58, 95, 0.08); /* Subtle shadow scale — opt-in per component. Kinetic stays mostly shadowless by default; these are for hover-lift cards only. */ --shadow-sm: 0 1px 2px rgba(15, 31, 53, 0.04); --shadow-md: 0 4px 12px rgba(15, 31, 53, 0.06); --shadow-lg: 0 12px 40px rgba(15, 31, 53, 0.08); } /* Base body — applies on every page that loads this file. Kinetic-partial pages (_kinetic_head.html) add font/smoothing on top. */ body { background: var(--paper-3); color: var(--ink); } /* Grain texture overlay — subtle newsprint feel on all pages */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.035; } /* Graphite dark palette */ body[data-palette="graphite"] { --paper: #141619; --paper-2: #1c1f24; --paper-3: #252930; --ink: #f0ece2; --ink-2: #d4cfc2; --ink-3: #9a9487; --ink-4: #6e685c; --rule: #2e333b; --rule-2: #3f4651; --rule-strong: #3f4651; --accent: #6ea0d6; --accent-2: #9ec3e6; --accent-warm: #9ec3e6; --ok: #6fc28a; --warn: #d4a24a; --bad: #e08575; --green: #6fc28a; --blue: #6ea0d6; --bg: #141619; /* v3 terminal-pattern port — graphite (dark) equivalents */ --ok-tint: rgba(111, 194, 138, 0.12); --warn-tint: rgba(212, 162, 74, 0.14); --bad-tint: rgba(224, 133, 117, 0.12); --blue-tint: rgba(110, 160, 214, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50); }