/* ============================================================ FACTLINE — Design Tokens Shared across index.html, report.html, admin.html ============================================================ */ :root { /* ---------- Primary Gradient ---------- */ --gradient-primary: linear-gradient(135deg, #6B4EFF 0%, #9B6BFF 40%, #C9A9FF 70%, #E8D5FF 100%); /* ---------- Accent Gradient (CTA, action) ---------- */ --gradient-accent: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%); /* ---------- Hero Background Glow ---------- */ --gradient-glow: radial-gradient(circle at 80% 60%, #E8D5FF 0%, #F4EFFA 30%, #FFFFFF 70%); /* ---------- Purple Scale ---------- */ --purple-700: #6B4EFF; --purple-600: #7C3AED; --purple-500: #A855F7; --purple-300: #C9A9FF; --purple-100: #E8D5FF; --purple-50: #F4EFFA; /* ---------- Neutral ---------- */ --text-primary: #0F0F14; --text-secondary: #6B6B7B; --text-tertiary: #9B9BA8; --bg-white: #FFFFFF; --bg-soft: #FAFAFB; --bg-card: #F5F5F7; --border-light: #E5E5EC; --border-default: #D5D5DD; /* ---------- Status ---------- */ --status-pending: #6B6B7B; --status-review: #7C3AED; --status-done: #22C55E; --status-reject: #EF4444; /* ---------- Radius ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* ---------- Shadow ---------- */ --shadow-sm: 0 1px 3px rgba(15, 15, 20, 0.06); --shadow-md: 0 4px 16px rgba(15, 15, 20, 0.08); --shadow-lg: 0 12px 40px rgba(107, 78, 255, 0.16); --shadow-glow: 0 0 80px rgba(155, 107, 255, 0.25); /* ---------- Spacing ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Layout ---------- */ --container-max: 1280px; --container-padding: 24px; --header-height: 72px; } /* ============================================================ Dark theme — applied via Only neutral/background/border tokens flip; purple scale and status colours stay identical so the brand accent reads the same in either mode. ============================================================ */ [data-theme="dark"] { /* Background */ --bg-white: #1A1A1F; --bg-soft: #22222A; --bg-card: #2A2A33; --bg-elevated: #32323D; /* Text */ --text-primary: #FFFFFF; --text-secondary: #B8B8C7; --text-tertiary: #7E7E92; /* Border */ --border-light: #32323D; --border-default: #45455A; /* Shadow — barely visible against dark surfaces */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); }