/* ================================================================ VERACITA DESIGN TOKENS — new-website Single source of truth. Zero hardcoded values outside this file. ================================================================ */ :root, [data-theme="dark"] { /* --- Backgrounds (3-layer depth system) --- */ --vc-bg-base: #0B0D13; /* Nav, footer — deepest layer */ --vc-bg-body: #0F1117; /* Page background */ --vc-bg-surface: #161922; /* Cards, panels, inputs */ --vc-bg-surface-2: #1C1F2B; /* Hover state on surface */ --vc-bg-glass: rgba(255, 255, 255, 0.03); --vc-bg-glass-hover: rgba(255, 255, 255, 0.055); /* --- Text (4-tier hierarchy) --- */ --vc-text-primary: #E8EAED; /* Headings, titles */ --vc-text-secondary: #A8ADBE; /* Body, descriptions */ --vc-text-tertiary: #6B7084; /* Labels, metadata */ --vc-text-muted: #505568; /* Timestamps, sub-labels */ --vc-text-disabled: #3F4354; /* Placeholders */ /* --- Accent / Interactive — indigo (tabs, buttons, links) --- */ --vc-accent: #818CF8; --vc-accent-hover: #6366F1; --vc-accent-subtle: rgba(129, 140, 248, 0.10); --vc-accent-border: rgba(129, 140, 248, 0.22); --vc-gradient-brand: linear-gradient(135deg, #4384ff 0%, #818CF8 50%, #7b42ff 100%); --vc-gradient-text: linear-gradient(135deg, #818CF8, #7b42ff); /* --- Founder / Amber — EXCLUSIVE to founder offer elements --- */ --vc-founder: #F0B429; --vc-founder-hover: #E8A820; --vc-founder-subtle: rgba(240, 180, 41, 0.08); --vc-founder-border: rgba(240, 180, 41, 0.20); --vc-founder-gradient: linear-gradient(135deg, #F0B429 0%, #E8651A 100%); /* --- Depth variant (alternate section backgrounds) --- */ --vc-bg-depth: #131620; /* --- Purple accent variant (hero gradients) --- */ --vc-purple: #7b42ff; /* --- Status — verdict indicators ONLY, never UI chrome --- */ --vc-green: #3ECF8E; --vc-green-subtle: rgba(62, 207, 142, 0.07); --vc-green-border: rgba(62, 207, 142, 0.18); --vc-amber: #F0B429; --vc-amber-subtle: rgba(240, 180, 41, 0.07); --vc-red: #F87171; --vc-red-subtle: rgba(248, 113, 113, 0.07); /* --- Borders --- */ --vc-border-subtle: rgba(255, 255, 255, 0.04); --vc-border-default: rgba(255, 255, 255, 0.07); --vc-border-emphasis: rgba(255, 255, 255, 0.13); /* --- Shadows --- */ --vc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --vc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --vc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65); --vc-shadow-accent: 0 0 24px rgba(129, 140, 248, 0.14); --vc-shadow-founder: 0 0 40px rgba(240, 180, 41, 0.10); /* --- Spacing scale (4px base) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* --- Border radii --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* --- Typography --- */ --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace; /* --- Verdict overlay system --- */ --vc-supported-bg: rgba(16, 185, 129, 0.15); --vc-supported-bg-hover: rgba(16, 185, 129, 0.20); --vc-supported-border: rgba(16, 185, 129, 0.30); --vc-partial-bg: rgba(245, 158, 11, 0.15); --vc-partial-bg-hover: rgba(245, 158, 11, 0.20); --vc-partial-border: rgba(245, 158, 11, 0.30); --vc-unsupported-bg: rgba(239, 68, 68, 0.15); --vc-unsupported-bg-hover: rgba(239, 68, 68, 0.20); --vc-unsupported-border: rgba(239, 68, 68, 0.30); --vc-unverifiable-bg: rgba(107, 114, 128, 0.12); --vc-unverifiable-bg-hover: rgba(107, 114, 128, 0.18); --vc-unverifiable-border: rgba(107, 114, 128, 0.25); /* Dark overlay backgrounds */ --vc-bg-overlay: rgba(0, 0, 0, 0.2); --vc-bg-overlay-heavy: rgba(0, 0, 0, 0.3); /* --- Action / Button blue --- */ --vc-action-primary: #4384ff; --vc-action-primary-hover: #5b9aff; --vc-accent-purple: #667eea; /* --- Hero gradient (extracted from hero.css hardcoded values) --- */ --vc-gradient-hero: linear-gradient(135deg, #818CF8 0%, #a78bfa 40%, #c084fc 70%, #e879f9 100%); --vc-eyebrow-bg: rgba(129,140,248,0.08); --vc-eyebrow-border: rgba(129,140,248,0.2); /* --- Transitions --- */ --t-fast: 150ms ease; --t-reveal: 400ms cubic-bezier(0.16, 1, 0.3, 1); } /* ================================================================ LIGHT THEME Same token names, inverted for light backgrounds. Accents adjusted for WCAG AA contrast on white. ================================================================ */ [data-theme="light"] { /* --- Backgrounds (3-layer depth — light) --- */ --vc-bg-base: #FFFFFF; --vc-bg-body: #F8F9FC; --vc-bg-surface: #FFFFFF; --vc-bg-surface-2: #F1F3F8; --vc-bg-glass: rgba(0, 0, 0, 0.02); --vc-bg-glass-hover: rgba(0, 0, 0, 0.04); /* --- Text (4-tier — dark on light) --- */ --vc-text-primary: #111827; --vc-text-secondary: #374151; --vc-text-tertiary: #6B7280; --vc-text-muted: #9CA3AF; --vc-text-disabled: #D1D5DB; /* --- Accent — darker indigo for contrast on white --- */ --vc-accent: #6366F1; --vc-accent-hover: #4F46E5; --vc-accent-subtle: rgba(99, 102, 241, 0.08); --vc-accent-border: rgba(99, 102, 241, 0.20); --vc-gradient-brand: linear-gradient(135deg, #3B6EF6 0%, #6366F1 50%, #7C3AED 100%); --vc-gradient-text: linear-gradient(135deg, #6366F1, #7C3AED); /* --- Founder / Amber — darker for contrast --- */ --vc-founder: #D97706; --vc-founder-hover: #B45309; --vc-founder-subtle: rgba(217, 119, 6, 0.06); --vc-founder-border: rgba(217, 119, 6, 0.18); --vc-founder-gradient: linear-gradient(135deg, #D97706 0%, #C2410C 100%); /* --- Depth variant --- */ --vc-bg-depth: #F1F3F8; /* --- Purple --- */ --vc-purple: #7C3AED; /* --- Status — darker variants for light backgrounds --- */ --vc-green: #059669; --vc-green-subtle: rgba(5, 150, 105, 0.06); --vc-green-border: rgba(5, 150, 105, 0.18); --vc-amber: #D97706; --vc-amber-subtle: rgba(217, 119, 6, 0.06); --vc-red: #DC2626; --vc-red-subtle: rgba(220, 38, 38, 0.06); /* --- Borders (dark on light) --- */ --vc-border-subtle: rgba(0, 0, 0, 0.04); --vc-border-default: rgba(0, 0, 0, 0.08); --vc-border-emphasis: rgba(0, 0, 0, 0.14); /* --- Shadows (softer for light mode) --- */ --vc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --vc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --vc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); --vc-shadow-accent: 0 0 24px rgba(99, 102, 241, 0.10); --vc-shadow-founder: 0 0 40px rgba(217, 119, 6, 0.08); /* --- Verdict overlays (lighter backgrounds) --- */ --vc-supported-bg: rgba(5, 150, 105, 0.08); --vc-supported-bg-hover: rgba(5, 150, 105, 0.12); --vc-supported-border: rgba(5, 150, 105, 0.25); --vc-partial-bg: rgba(217, 119, 6, 0.08); --vc-partial-bg-hover: rgba(217, 119, 6, 0.12); --vc-partial-border: rgba(217, 119, 6, 0.25); --vc-unsupported-bg: rgba(220, 38, 38, 0.08); --vc-unsupported-bg-hover: rgba(220, 38, 38, 0.12); --vc-unsupported-border: rgba(220, 38, 38, 0.25); --vc-unverifiable-bg: rgba(107, 114, 128, 0.08); --vc-unverifiable-bg-hover: rgba(107, 114, 128, 0.12); --vc-unverifiable-border: rgba(107, 114, 128, 0.20); /* --- Overlay --- */ --vc-bg-overlay: rgba(0, 0, 0, 0.08); --vc-bg-overlay-heavy: rgba(0, 0, 0, 0.15); /* --- Action / Button blue --- */ --vc-action-primary: #3B6EF6; --vc-action-primary-hover: #2563EB; --vc-accent-purple: #5B21B6; /* --- Hero gradient (lighter, more vibrant) --- */ --vc-gradient-hero: linear-gradient(135deg, #6366F1 0%, #8B5CF6 40%, #A78BFA 70%, #C084FC 100%); --vc-eyebrow-bg: rgba(99, 102, 241, 0.06); --vc-eyebrow-border: rgba(99, 102, 241, 0.15); }