/* ============================================================================ VERACITA DESIGN TOKENS ============================================================================ This is the SINGLE SOURCE OF TRUTH for all colors in the VeraCita platform. USAGE: 1. Add this file as the FIRST in citation-checker.html (before all other CSS files) 2. In your CSS, replace hardcoded hex values with var(--vc-token-name) 3. Theme switching: change [data-theme="dark"] to [data-theme="light"] on or FILE LOCATION: apps/web/css/core/veracita-tokens.css NAMING CONVENTION: --vc-{category}-{role} Categories: bg, text, status, accent, border, shadow Roles: base, surface, elevated, primary, secondary, tertiary, muted, etc. ============================================================================ */ /* ============================================================================ DARK THEME (Default — Web App) ============================================================================ */ [data-theme="dark"], :root { /* --- BACKGROUNDS (3-layer depth system) --- */ --vc-bg-base: #0F1117; /* Nav bars, deepest layer — matches mockup */ --vc-bg-body: #0F1117; /* Page background */ --vc-bg-surface: #161922; /* Cards, panels, elevated areas */ --vc-bg-surface-hover: #1C1F2B; /* Hover state on surface */ --vc-bg-input: rgba(255, 255, 255, 0.03); /* Input fields */ --vc-bg-input-hover: rgba(255, 255, 255, 0.05); /* Input hover */ /* --- TEXT (4-tier hierarchy) --- */ --vc-text-primary: #E8EAED; /* Headings, titles, doc name */ --vc-text-evidence: #D8DCE5; /* Evidence quotes, claim text — AAA 11.5:1 */ --vc-text-secondary: #A8ADBE; /* Analysis, descriptions — AA 7:1 */ --vc-text-tertiary: #8B90A0; /* Section labels, metadata — AA 5.2:1 (was #6B7084 at 3.5:1) */ --vc-text-muted: #505568; /* Sub-labels, timestamps */ --vc-text-disabled: #3F4354; /* Disabled, decorative, placeholders */ /* --- STATUS COLORS (Semantic — verdict-only) --- */ --vc-status-supported: #3ECF8E; /* Supported verdict */ --vc-status-partial: #F0B429; /* Partial verdict */ --vc-status-unsupported: #F87171; /* Unsupported verdict */ --vc-status-unverifiable: #6B7280; /* Unverifiable verdict */ /* --- STATUS BACKGROUNDS (subtle tints for cards/badges) --- */ --vc-status-supported-bg: rgba(62, 207, 142, 0.06); --vc-status-supported-border: rgba(62, 207, 142, 0.1); --vc-status-supported-subtle: rgba(62, 207, 142, 0.65); /* Subtitle text */ --vc-status-partial-bg: rgba(240, 180, 41, 0.05); --vc-status-partial-border: rgba(240, 180, 41, 0.1); --vc-status-partial-subtle: rgba(240, 180, 41, 0.65); --vc-status-unsupported-bg: rgba(248, 113, 113, 0.05); --vc-status-unsupported-border: rgba(248, 113, 113, 0.1); --vc-status-unsupported-subtle: rgba(248, 113, 113, 0.65); --vc-status-unverifiable-bg: rgba(107, 114, 128, 0.06); --vc-status-unverifiable-border: rgba(107, 114, 128, 0.1); --vc-status-unverifiable-subtle: rgba(107, 114, 128, 0.65); /* --- CLAIM HIGHLIGHTS (document text overlays) --- */ --vc-highlight-supported-bg: rgba(62, 207, 142, 0.06); --vc-highlight-supported-border: rgba(62, 207, 142, 0.3); --vc-highlight-partial-bg: rgba(240, 180, 41, 0.05); --vc-highlight-partial-border: rgba(240, 180, 41, 0.3); --vc-highlight-unsupported-bg: rgba(248, 113, 113, 0.04); --vc-highlight-unsupported-border: rgba(248, 113, 113, 0.3); --vc-highlight-text: #C0C6D2; /* Text inside highlights */ /* --- ACCENT / INTERACTIVE (Navigation, not status) --- */ --vc-accent-primary: #818CF8; /* Active tabs, links, buttons */ --vc-accent-primary-hover: #6366F1; /* Hover state */ --vc-accent-gradient: linear-gradient(135deg, #818CF8, #6366F1); --vc-accent-bg: rgba(129, 140, 248, 0.15); /* Citation badges bg */ --vc-accent-border: rgba(129, 140, 248, 0.3); /* Citation badges border */ --vc-accent-shadow: 0 2px 10px rgba(99, 102, 241, 0.2); /* --- EVIDENCE BOX BORDERS (left accent lines) --- */ --vc-evidence-claim-border: rgba(62, 207, 142, 0.2); /* Green for "your doc" */ --vc-evidence-source-border: rgba(129, 140, 248, 0.2); /* Indigo for "source" */ /* --- BORDERS & DIVIDERS --- */ --vc-border-subtle: rgba(255, 255, 255, 0.04); --vc-border-default: rgba(255, 255, 255, 0.06); --vc-border-emphasis: rgba(255, 255, 255, 0.1); /* --- GLASS / OVERLAY EFFECTS --- */ --vc-glass-bg: rgba(255, 255, 255, 0.02); --vc-glass-border: rgba(255, 255, 255, 0.05); --vc-glass-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent); --vc-gradient-top-line: linear-gradient(90deg, transparent, rgba(62, 207, 142, 0.15), transparent); /* --- SHADOWS --- */ --vc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --vc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --vc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); /* --- SCROLLBAR --- */ --vc-scrollbar-thumb: rgba(255, 255, 255, 0.08); --vc-scrollbar-thumb-hover: rgba(255, 255, 255, 0.14); --vc-scrollbar-track: transparent; /* --- COMPONENT-SPECIFIC --- */ --vc-score-glow: 0 0 14px rgba(62, 207, 142, 0.12); --vc-match-pill-bg: rgba(62, 207, 142, 0.06); --vc-match-pill-border: rgba(62, 207, 142, 0.1); --vc-source-card-hover-bg: rgba(129, 140, 248, 0.04); --vc-source-card-hover-border: rgba(129, 140, 248, 0.15); /* --- ACTION (interactive element accent) --- */ --vc-action-primary: #818CF8; --vc-action-primary-hover: #6366F1; /* --- OVERLAYS --- */ --vc-bg-overlay: rgba(0, 0, 0, 0.5); --vc-bg-overlay-heavy: rgba(0, 0, 0, 0.75); /* --- VERDICT TINT SHORTHANDS (alias to status-* variants) --- */ --vc-supported-bg: var(--vc-status-supported-bg); --vc-supported-bg-hover: rgba(62, 207, 142, 0.14); --vc-supported-border: var(--vc-status-supported-border); --vc-partial-bg: var(--vc-status-partial-bg); --vc-partial-bg-hover: rgba(240, 180, 41, 0.12); --vc-partial-border: var(--vc-status-partial-border); --vc-unsupported-bg: var(--vc-status-unsupported-bg); --vc-unsupported-bg-hover: rgba(248, 113, 113, 0.12); --vc-unsupported-border: var(--vc-status-unsupported-border); --vc-unverifiable-bg: var(--vc-status-unverifiable-bg); --vc-unverifiable-bg-hover: rgba(107, 114, 128, 0.14); /* --- LEGACY COMPATIBILITY (bridged from design-tokens.css) --- */ --vc-bg-page: var(--vc-bg-body); --vc-bg-card: var(--vc-bg-surface-hover); --vc-bg-elevated: var(--vc-bg-surface-hover); --vc-bg-hover: var(--vc-bg-surface-hover); --vc-border: rgba(150, 145, 175, 0.06); --vc-border-hover: rgba(150, 145, 175, 0.12); --vc-border-focus: rgba(129, 140, 248, 0.25); --vc-accent: #7268D8; --vc-accent-purple: var(--vc-accent); --vc-accent-mid: #8578E8; --vc-accent-bright: #9B90F0; --vc-accent-dim: rgba(114, 104, 216, 0.06); --vc-cta-bg: #4A4598; --vc-cta-bg-hover: #514C9E; --vc-green: #4ADE80; --vc-green-dim: rgba(74, 222, 128, 0.06); --vc-amber: #FBBF24; --vc-amber-dim: rgba(251, 191, 36, 0.06); --vc-red: #F87171; --vc-red-dim: rgba(248, 113, 113, 0.06); --vc-t1: #E5E1EC; --vc-t2: #A9A4B8; --vc-t3: #6B6580; --vc-t4: #605C75; --vc-font-main: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* --- SPACING (reference scale) --- */ --vc-s4: 4px; --vc-s8: 8px; --vc-s12: 12px; --vc-s16: 16px; --vc-s20: 20px; --vc-s24: 24px; --sp-1: 1px; --sp-2: 2px; --sp-3: 3px; --sp-4: var(--vc-s4); --sp-5: 5px; --sp-6: 6px; --sp-8: var(--vc-s8); --sp-10: 10px; /* --- RADII --- */ --vc-r4: 4px; --vc-r6: 6px; --vc-r8: 8px; --vc-r12: 12px; --r-sm: var(--vc-r4); --r-md: var(--vc-r8); --r-lg: var(--vc-r12); /* --- FONTS --- */ --vc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --vc-font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace; /* --- TYPOGRAPHY SCALE (1.2 ratio) --- */ --vc-text-xs: 0.694rem; /* ~11px — meta, badges */ --vc-text-sm: 0.833rem; /* ~13px — secondary text, labels */ --vc-text-base: 1rem; /* 16px — body text */ --vc-text-lg: 1.2rem; /* ~19px — section headings */ --vc-text-xl: 1.44rem; /* ~23px — page headings */ --vc-text-2xl: 1.728rem; /* ~28px — document title */ /* --- LINE HEIGHTS --- */ --vc-leading-tight: 1.3; /* headings */ --vc-leading-normal: 1.5; /* UI text */ --vc-leading-relaxed: 1.75; /* document body text */ /* --- FONT WEIGHTS --- */ --vc-font-normal: 400; --vc-font-medium: 500; --vc-font-semibold: 600; --vc-font-bold: 700; } /* ============================================================================ LIGHT THEME (User preference + PDF export reference) ============================================================================ */ [data-theme="light"] { /* --- BACKGROUNDS --- */ --vc-bg-base: #F8FAFC; /* Nav bars */ --vc-bg-body: #FFFFFF; /* Page background */ --vc-bg-surface: #F8FAFC; /* Cards, panels */ --vc-bg-surface-hover: #F1F5F9; /* Hover */ --vc-bg-input: #FFFFFF; --vc-bg-input-hover: #F8FAFC; /* --- TEXT --- */ --vc-text-primary: #1E293B; /* Headings */ --vc-text-evidence: #1E293B; /* Evidence text — very high contrast */ --vc-text-secondary: #374151; /* Analysis */ --vc-text-tertiary: #64748B; /* Labels */ --vc-text-muted: #94A3B8; /* Sub-labels */ --vc-text-disabled: #CBD5E1; /* Disabled */ /* --- STATUS COLORS (Institutional / print-safe) --- */ --vc-status-supported: #059669; /* Emerald */ --vc-status-partial: #D97706; /* Dark amber */ --vc-status-unsupported: #DC2626; /* Crimson */ --vc-status-unverifiable: #64748B; /* Slate */ /* --- STATUS BACKGROUNDS --- */ --vc-status-supported-bg: #F0FDF9; --vc-status-supported-border: #A7F3D0; --vc-status-supported-subtle: #059669; --vc-status-partial-bg: #FFFBEB; --vc-status-partial-border: #FDE68A; --vc-status-partial-subtle: #B45309; --vc-status-unsupported-bg: #FEF2F2; --vc-status-unsupported-border: #FECACA; --vc-status-unsupported-subtle: #DC2626; --vc-status-unverifiable-bg: #F9FAFB; --vc-status-unverifiable-border: #E5E7EB; --vc-status-unverifiable-subtle: #6B7280; /* --- CLAIM HIGHLIGHTS --- */ --vc-highlight-supported-bg: #F0FDF9; --vc-highlight-supported-border: #A7F3D0; --vc-highlight-partial-bg: #FFFBEB; --vc-highlight-partial-border: #FDE68A; --vc-highlight-unsupported-bg: #FEF2F2; --vc-highlight-unsupported-border: #FECACA; --vc-highlight-text: #1E293B; /* --- ACCENT / INTERACTIVE --- */ --vc-accent-primary: #1E40AF; /* Deep navy */ --vc-accent-primary-hover: #1E3A8A; --vc-accent-gradient: linear-gradient(135deg, #1E40AF, #1E3A8A); --vc-accent-bg: #EEF2FF; --vc-accent-border: #C7D2FE; --vc-accent-shadow: 0 1px 3px rgba(30, 64, 175, 0.2); /* --- EVIDENCE BOX BORDERS --- */ --vc-evidence-claim-border: #059669; --vc-evidence-source-border: #1E40AF; /* --- BORDERS & DIVIDERS --- */ --vc-border-subtle: #F1F5F9; --vc-border-default: #E2E8F0; --vc-border-emphasis: #CBD5E1; /* --- GLASS / OVERLAY EFFECTS --- */ --vc-glass-bg: #FFFFFF; --vc-glass-border: #E2E8F0; --vc-glass-shine: none; --vc-gradient-top-line: none; /* --- SHADOWS --- */ --vc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --vc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --vc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); /* --- SCROLLBAR --- */ --vc-scrollbar-thumb: #CBD5E1; --vc-scrollbar-thumb-hover: #94A3B8; --vc-scrollbar-track: transparent; /* --- COMPONENT-SPECIFIC --- */ --vc-score-glow: none; --vc-match-pill-bg: #F0FDF9; --vc-match-pill-border: #A7F3D0; --vc-source-card-hover-bg: #EEF2FF; --vc-source-card-hover-border: #C7D2FE; /* --- ACTION (interactive element accent) --- */ --vc-action-primary: #1E40AF; --vc-action-primary-hover: #1E3A8A; /* --- OVERLAYS --- */ --vc-bg-overlay: rgba(0, 0, 0, 0.3); --vc-bg-overlay-heavy: rgba(0, 0, 0, 0.5); /* --- VERDICT TINT SHORTHANDS --- */ --vc-supported-bg: var(--vc-status-supported-bg); --vc-supported-bg-hover: rgba(5, 150, 105, 0.08); --vc-supported-border: var(--vc-status-supported-border); --vc-partial-bg: var(--vc-status-partial-bg); --vc-partial-bg-hover: rgba(217, 119, 6, 0.08); --vc-partial-border: var(--vc-status-partial-border); --vc-unsupported-bg: var(--vc-status-unsupported-bg); --vc-unsupported-bg-hover: rgba(220, 38, 38, 0.08); --vc-unsupported-border: var(--vc-status-unsupported-border); --vc-unverifiable-bg: var(--vc-status-unverifiable-bg); --vc-unverifiable-bg-hover: rgba(100, 116, 139, 0.08); /* --- LEGACY COMPATIBILITY --- */ --vc-bg-page: var(--vc-bg-body); --vc-bg-card: var(--vc-bg-surface-hover); --vc-bg-elevated: var(--vc-bg-surface-hover); --vc-bg-hover: var(--vc-bg-surface-hover); --vc-border: #E2E8F0; --vc-border-hover: #CBD5E1; --vc-border-focus: rgba(30, 64, 175, 0.25); --vc-accent: #1E40AF; --vc-accent-purple: var(--vc-accent); --vc-accent-mid: #2563EB; --vc-accent-bright: #3B82F6; --vc-accent-dim: rgba(30, 64, 175, 0.06); --vc-cta-bg: #1E40AF; --vc-cta-bg-hover: #1E3A8A; --vc-green: #059669; --vc-green-dim: rgba(5, 150, 105, 0.06); --vc-amber: #D97706; --vc-amber-dim: rgba(217, 119, 6, 0.06); --vc-red: #DC2626; --vc-red-dim: rgba(220, 38, 38, 0.06); --vc-t1: #1E293B; --vc-t2: #374151; --vc-t3: #64748B; --vc-t4: #94A3B8; --vc-font-main: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* --- SPACING --- */ --vc-s4: 4px; --vc-s8: 8px; --vc-s12: 12px; --vc-s16: 16px; --vc-s20: 20px; --vc-s24: 24px; --sp-1: 1px; --sp-2: 2px; --sp-3: 3px; --sp-4: var(--vc-s4); --sp-5: 5px; --sp-6: 6px; --sp-8: var(--vc-s8); --sp-10: 10px; /* --- RADII --- */ --vc-r4: 4px; --vc-r6: 6px; --vc-r8: 8px; --vc-r12: 12px; --r-sm: var(--vc-r4); --r-md: var(--vc-r8); --r-lg: var(--vc-r12); /* --- TYPOGRAPHY SCALE (1.2 ratio) --- */ --vc-text-xs: 0.694rem; /* ~11px — meta, badges */ --vc-text-sm: 0.833rem; /* ~13px — secondary text, labels */ --vc-text-base: 1rem; /* 16px — body text */ --vc-text-lg: 1.2rem; /* ~19px — section headings */ --vc-text-xl: 1.44rem; /* ~23px — page headings */ --vc-text-2xl: 1.728rem; /* ~28px — document title */ /* --- LINE HEIGHTS --- */ --vc-leading-tight: 1.3; /* headings */ --vc-leading-normal: 1.5; /* UI text */ --vc-leading-relaxed: 1.75; /* document body text */ /* --- FONT WEIGHTS --- */ --vc-font-normal: 400; --vc-font-medium: 500; --vc-font-semibold: 600; --vc-font-bold: 700; } /* ============================================================================ PDF EXPORT OVERRIDES ============================================================================ For jsPDF generation, use these hex values directly in JS. They map 1:1 with light theme tokens but are provided here as a quick reference for PDF-generating code. Usage in JS: const PDF_COLORS = window.VERACITA_PDF_COLORS; doc.setTextColor(PDF_COLORS.text.primary); ============================================================================ */ /* ============================================================================ GLOBAL RESETS USING TOKENS ============================================================================ These apply the tokens to common elements so you get automatic theming on basic HTML without changing per-screen CSS. ============================================================================ */ body { background-color: var(--vc-bg-body); color: var(--vc-text-primary); font-family: var(--vc-font-body); } /* Scrollbar theming */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--vc-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--vc-scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--vc-scrollbar-thumb-hover); } /* ============================================================================ UTILITY CLASSES (Optional — use if helpful) ============================================================================ */ .vc-text-primary { color: var(--vc-text-primary); } .vc-text-evidence { color: var(--vc-text-evidence); } .vc-text-secondary { color: var(--vc-text-secondary); } .vc-text-tertiary { color: var(--vc-text-tertiary); } .vc-text-muted { color: var(--vc-text-muted); } .vc-bg-base { background-color: var(--vc-bg-base); } .vc-bg-body { background-color: var(--vc-bg-body); } .vc-bg-surface { background-color: var(--vc-bg-surface); } .vc-status-supported { color: var(--vc-status-supported); } .vc-status-partial { color: var(--vc-status-partial); } .vc-status-unsupported { color: var(--vc-status-unsupported); } .vc-status-unverifiable { color: var(--vc-status-unverifiable); } /* ============================================================================ ACCESSIBILITY — Focus Visible ============================================================================ */ *:focus-visible { outline: 2px solid var(--vc-border-focus); outline-offset: 2px; } button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--vc-accent-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--vc-accent-dim); }