/* ============================================= VISAVERGE DESIGN TOKENS Extracted from VisaVergeUI design system. All custom properties prefixed with --vv- ============================================= */ :root { /* --- COLOR PALETTE --- */ --vv-paper: #F2F0E9; --vv-paper-white: #FDFBF7; --vv-paper-dark: #E8E5DC; --vv-ink: #111827; --vv-ink-sub: #374151; --vv-ink-muted: #6B7280; --vv-navy: #1e3a8a; --vv-navy-light: #3B5FC0; --vv-nav-bg: #1e3a8a; --vv-teal: #0F766E; --vv-teal-light: #14B8A6; --vv-amber: #B45309; --vv-alert: #991B1B; --vv-gold: #CA8A04; /* --- ALERT BOX BACKGROUNDS --- */ --vv-bg-red: #FEE2E2; --vv-bg-amber: #FEF3C7; --vv-bg-green: #D1FAE5; --vv-bg-blue: #F0F9FF; --vv-bg-yellow: #FEF9E8; --vv-bg-dark: #0F172A; /* --- TYPOGRAPHY --- */ --vv-font-head: 'DM Serif Display', Georgia, serif; --vv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --vv-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --vv-font-prose: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- TYPE SCALE --- */ --vv-text-xs: 0.75rem; --vv-text-sm: 0.875rem; --vv-text-base: 1rem; --vv-text-md: 1.05rem; --vv-text-lg: 1.2rem; --vv-text-xl: 1.5rem; --vv-text-2xl: 1.8rem; --vv-text-3xl: 2.2rem; --vv-text-4xl: 2.5rem; /* --- BORDERS --- */ --vv-border-heavy: 2px solid var(--vv-ink); --vv-border-light: 1px solid #9CA3AF; --vv-border-faint: 1px solid #E5E7EB; /* --- SHADOWS --- */ --vv-shadow-hard: 6px 6px 0 rgba(0,0,0,0.10); --vv-shadow-soft: 0 2px 8px rgba(0,0,0,0.06); --vv-shadow-card: 4px 4px 0 rgba(0,0,0,0.08); /* --- RADIUS --- */ --vv-radius-sm: 4px; --vv-radius-md: 8px; --vv-radius-lg: 12px; /* --- SPACING SCALE --- */ --vv-space-1: 4px; --vv-space-2: 8px; --vv-space-3: 12px; --vv-space-4: 16px; --vv-space-5: 20px; --vv-space-6: 24px; --vv-space-8: 32px; --vv-space-10: 40px; --vv-space-12: 48px; --vv-space-16: 64px; --vv-space-20: 80px; /* --- LAYOUT --- */ --vv-container: 1400px; --vv-sidebar-w: 440px; --vv-content-gap: 32px; /* --- TRANSITIONS --- */ --vv-transition: all 0.2s ease; /* Light mode color-scheme hint */ color-scheme: light; } /* ============================================= DARK MODE TOKENS Applied via [data-theme="dark"] on or via system prefers-color-scheme: dark ============================================= */ [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --vv-paper: #0F172A; --vv-paper-white: #1E293B; --vv-paper-dark: #2D3748; /* Text */ --vv-ink: #F1F5F9; --vv-ink-sub: #CBD5E1; --vv-ink-muted: #94A3B8; /* Brand (lightened for dark backgrounds) */ --vv-navy: #60A5FA; --vv-navy-light: #93C5FD; --vv-teal: #2DD4BF; --vv-teal-light: #5EEAD4; --vv-amber: #FCD34D; --vv-alert: #FCA5A5; --vv-gold: #FCD34D; /* Alert box backgrounds (darkened) */ --vv-bg-red: #450A0A; --vv-bg-amber: #451A03; --vv-bg-green: #052E16; --vv-bg-blue: #0C1A3B; --vv-bg-yellow: #422006; /* Borders */ --vv-border-heavy: 2px solid #475569; --vv-border-light: 1px solid #475569; --vv-border-faint: 1px solid #334155; /* Nav bar (darker in dark mode) */ --vv-nav-bg: #0F1D45; /* Shadows (stronger for contrast) */ --vv-shadow-hard: 6px 6px 0 rgba(0,0,0,0.5); --vv-shadow-soft: 0 2px 8px rgba(0,0,0,0.4); --vv-shadow-card: 4px 4px 0 rgba(0,0,0,0.4); } /* System preference: activate dark vars when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --vv-paper: #0F172A; --vv-paper-white: #1E293B; --vv-paper-dark: #2D3748; --vv-ink: #F1F5F9; --vv-ink-sub: #CBD5E1; --vv-ink-muted: #94A3B8; --vv-navy: #60A5FA; --vv-navy-light: #93C5FD; --vv-teal: #2DD4BF; --vv-teal-light: #5EEAD4; --vv-amber: #FCD34D; --vv-alert: #FCA5A5; --vv-gold: #FCD34D; --vv-bg-red: #450A0A; --vv-bg-amber: #451A03; --vv-bg-green: #052E16; --vv-bg-blue: #0C1A3B; --vv-bg-yellow: #422006; --vv-border-heavy: 2px solid #475569; --vv-border-light: 1px solid #475569; --vv-border-faint: 1px solid #334155; --vv-nav-bg: #0F1D45; --vv-shadow-hard: 6px 6px 0 rgba(0,0,0,0.5); --vv-shadow-soft: 0 2px 8px rgba(0,0,0,0.4); --vv-shadow-card: 4px 4px 0 rgba(0,0,0,0.4); } }