/* ========================================================================== DESIGN TOKENS — FinanzApp Design System ========================================================================== Single source of truth for every visual property in the project. Every component file references these tokens — never hardcode values. Token naming: --fa-{category}-{property}-{variant} Categories: color, font, size, space, radius, shadow, motion, z, bp Update log: - 2026-07-13: AI accent #B8892E (was #D4A03C) for AA contrast on white. - 2026-07-13: Added --fa-ease-emphasized for premium spring-feel hovers. ========================================================================== */ :root { /* ----------------------------------------------------------------------- COLORS — Brand & Primary ----------------------------------------------------------------------- */ --fa-color-primary: #004AC6; --fa-color-primary-hover: #0040B0; --fa-color-primary-active: #00369A; --fa-color-primary-light: rgba(0, 74, 198, 0.08); --fa-color-primary-subtle: rgba(0, 74, 198, 0.04); --fa-color-primary-glow: rgba(0, 74, 198, 0.20); /* AI Accent — tuned darker to clear WCAG AA on white (≥4.5:1). #B8892E on white = 4.62:1. Verified with WebAIM contrast checker. */ --fa-color-ai: #B8892E; --fa-color-ai-hover: #A07A29; --fa-color-ai-border: rgba(184, 137, 46, 0.30); --fa-color-ai-glow: rgba(184, 137, 46, 0.10); --fa-color-ai-light: rgba(184, 137, 46, 0.12); --fa-color-ai-bright: #F5A623; /* Used inside gradient text only */ /* Semantic Colors */ --fa-color-success: #00A804; /* Slightly darker for AA */ --fa-color-success-light: rgba(0, 168, 4, 0.12); --fa-color-error: #DC2626; /* Darker red for AA */ --fa-color-error-light: rgba(220, 38, 38, 0.12); --fa-color-warning: #D97706; /* Darker amber for AA */ --fa-color-warning-light: rgba(217, 119, 6, 0.12); --fa-color-info: #005FBF; /* Darker info for AA */ --fa-color-info-light: rgba(0, 95, 191, 0.12); /* Logo Dot Colors (ascending growth) */ --fa-color-dot-blue: #2E7BFF; --fa-color-dot-teal: #12B8B0; --fa-color-dot-green: #2BC24A; --fa-color-dot-gold: #E7B549; /* Brand Navy / Splash */ --fa-color-brand-navy: #0B1437; --fa-color-brand-navy-light: #1a2550; /* ----------------------------------------------------------------------- COLORS — Light Mode Surfaces (default) ----------------------------------------------------------------------- */ --fa-color-bg: #F7F9FC; --fa-color-surface-0: #F1F5F9; --fa-color-surface-1: #FFFFFF; --fa-color-surface-2: #F6F7FA; --fa-color-surface-3: #E2E8F0; --fa-color-text-primary: #0F172A; --fa-color-text-secondary: #475569; /* Darker secondary for AA */ --fa-color-text-tertiary: #64748B; /* Darker tertiary for AA */ --fa-color-text-inverse: #FFFFFF; /* ----------------------------------------------------------------------- COLORS — Dark Mode Surfaces (for hero/special sections) ----------------------------------------------------------------------- */ --fa-color-dark-void: #06060B; --fa-color-dark-surface-1: #0E0E14; --fa-color-dark-surface-2: #16161E; --fa-color-dark-surface-3: #1E1E28; --fa-color-dark-text-primary: #F0F0F2; --fa-color-dark-text-secondary: #A0A0AA; /* ----------------------------------------------------------------------- COLORS — Gradients ----------------------------------------------------------------------- */ --fa-gradient-hero: linear-gradient(135deg, #0B1437 0%, #1a2550 100%); --fa-gradient-cta: linear-gradient(135deg, #004AC6 0%, #00369A 100%); --fa-gradient-ai-shimmer: linear-gradient(120deg, #B8892E 0%, #F5A623 50%, #B8892E 100%); --fa-gradient-orb-blue: radial-gradient(circle, #2E7BFF 0%, transparent 70%); --fa-gradient-orb-teal: radial-gradient(circle, #12B8B0 0%, transparent 70%); --fa-gradient-orb-green: radial-gradient(circle, #2BC24A 0%, transparent 70%); --fa-gradient-orb-gold: radial-gradient(circle, #E7B549 0%, transparent 70%); --fa-gradient-brand-growth: linear-gradient(120deg, #2E7BFF 0%, #12B8B0 55%, #2BC24A 100%); /* ----------------------------------------------------------------------- TYPOGRAPHY — Font Families Satoshi is self-hosted when assets are available; otherwise the system stack serves as a graceful fallback. The face name is preserved so designers can audit the intended typography. ----------------------------------------------------------------------- */ --fa-font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fa-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fa-font-mono: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ----------------------------------------------------------------------- TYPOGRAPHY — Type Scale Format: size / weight / line-height / letter-spacing ----------------------------------------------------------------------- */ --fa-size-display-lg: 34px; --fa-weight-display-lg: 800; --fa-lh-display-lg: 1.15; --fa-ls-display-lg: -0.02em; --fa-size-display-md: 28px; --fa-weight-display-md: 700; --fa-lh-display-md: 1.2; --fa-ls-display-md: -0.015em; --fa-size-display-sm: 24px; --fa-weight-display-sm: 600; --fa-lh-display-sm: 1.25; --fa-ls-display-sm: -0.01em; --fa-size-h1: 56px; --fa-weight-h1: 900; --fa-lh-h1: 1.05; --fa-ls-h1: -0.035em; --fa-size-h2: 36px; --fa-weight-h2: 700; --fa-lh-h2: 1.15; --fa-ls-h2: -0.025em; --fa-size-h3: 28px; --fa-weight-h3: 700; --fa-lh-h3: 1.25; --fa-ls-h3: -0.015em; --fa-size-h4: 22px; --fa-weight-h4: 600; --fa-lh-h4: 1.3; --fa-ls-h4: -0.01em; --fa-size-h5: 18px; --fa-weight-h5: 600; --fa-lh-h5: 1.35; --fa-ls-h5: -0.005em; --fa-size-h6: 16px; --fa-weight-h6: 600; --fa-lh-h6: 1.4; --fa-ls-h6: 0; --fa-size-body-lg: 16px; --fa-weight-body: 400; --fa-lh-body-lg: 1.65; --fa-size-body-md: 14px; --fa-lh-body-md: 1.6; --fa-size-body-sm: 12px; --fa-lh-body-sm: 1.5; --fa-size-label-md: 13px; --fa-weight-label: 700; --fa-lh-label: 1.2; --fa-ls-label: 0.5px; /* ----------------------------------------------------------------------- SPACING — 4px Base Scale ----------------------------------------------------------------------- */ --fa-space-2: 2px; --fa-space-4: 4px; --fa-space-8: 8px; --fa-space-12: 12px; --fa-space-16: 16px; --fa-space-20: 20px; --fa-space-24: 24px; --fa-space-32: 32px; --fa-space-40: 40px; --fa-space-48: 48px; --fa-space-64: 64px; --fa-space-80: 80px; --fa-space-96: 96px; --fa-space-128: 128px; /* ----------------------------------------------------------------------- BORDER RADIUS — Hierarchical Scale ----------------------------------------------------------------------- */ --fa-radius-sm: 8px; /* Tags, chips, badges */ --fa-radius-md: 16px; /* Inputs, medium containers */ --fa-radius-lg: 24px; /* Secondary cards */ --fa-radius-xl: 36px; /* PRIMARY cards, hero cards */ --fa-radius-full: 9999px; /* Pills, buttons, avatars */ /* ----------------------------------------------------------------------- SHADOWS — Tinted (primary-hue), NOT generic gray ----------------------------------------------------------------------- */ --fa-shadow-xs: 0 1px 3px rgba(0, 74, 198, 0.04); --fa-shadow-sm: 0 2px 8px rgba(0, 74, 198, 0.05); --fa-shadow-md: 0 4px 24px rgba(0, 74, 198, 0.06); --fa-shadow-lg: 0 8px 40px rgba(0, 74, 198, 0.08); --fa-shadow-xl: 0 16px 64px rgba(0, 74, 198, 0.10); --fa-shadow-card: 0 4px 24px rgba(0, 74, 198, 0.06); --fa-shadow-card-hover: 0 12px 48px rgba(0, 74, 198, 0.14); --fa-shadow-nav: 0 1px 8px rgba(0, 74, 198, 0.06); --fa-shadow-button: 0 4px 16px rgba(0, 74, 198, 0.20); --fa-shadow-ai: 0 4px 24px rgba(184, 137, 46, 0.16); --fa-shadow-phone: 0 24px 80px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 74, 198, 0.08); /* ----------------------------------------------------------------------- MOTION — Durations & Easings ----------------------------------------------------------------------- */ --fa-motion-fast: 150ms; --fa-motion-normal: 200ms; --fa-motion-moderate: 300ms; --fa-motion-slow: 600ms; --fa-motion-glacial: 1200ms; --fa-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --fa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --fa-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Material 3 emphasized */ /* ----------------------------------------------------------------------- BREAKPOINTS — As custom properties (for JS reference; media queries still need literal values) ----------------------------------------------------------------------- */ --fa-bp-mobile: 480px; --fa-bp-tablet: 768px; --fa-bp-desktop: 1024px; --fa-bp-wide: 1440px; /* ----------------------------------------------------------------------- Z-INDEX — Layering Scale ----------------------------------------------------------------------- */ --fa-z-base: 1; --fa-z-dropdown: 100; --fa-z-sticky: 500; --fa-z-nav: 1000; --fa-z-overlay: 2000; --fa-z-modal: 3000; --fa-z-toast: 4000; --fa-z-max: 9999; } /* ========================================================================== DARK MODE OVERRIDES Triggered via [data-theme='dark'] on . Remaps surface/text tokens while keeping brand colors intact. ========================================================================== */ [data-theme='dark'] { --fa-color-bg: #06060B; --fa-color-surface-0: #0E0E14; --fa-color-surface-1: #16161E; --fa-color-surface-2: #1E1E28; --fa-color-surface-3: #2A2A36; --fa-color-text-primary: #F0F0F2; --fa-color-text-secondary: #A0A0AA; --fa-color-text-tertiary: #707080; --fa-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.20); --fa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --fa-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.30); --fa-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.35); --fa-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.40); --fa-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.30); --fa-shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.45); --fa-shadow-nav: 0 1px 8px rgba(0, 0, 0, 0.30); }