/** * True Heart - Global Variables * Complete Consolidated File * Primary State: Dark Mode / Bioluminescent Turquoise */ :root { /* --- Brand Colors (Turquoise Spectrum) --- */ --th-primary: #3ECFCF; /* Main Teal */ --th-primary-dark: #1a8a8a; /* Deep Teal for hover/active */ --th-primary-light: #5DDFDF; /* Lighter teal for highlights */ /* --- Font Families --- */ --th-font-serif: 'Cormorant Garamond', Georgia, serif; --th-font-sans: 'DM Sans', system-ui, sans-serif; /* --- Base Grays & Backgrounds (Dark Mode Default) --- */ --th-bg-primary: #141c26; /* App Bar / Card Background */ --th-bg-secondary: #0d1117; /* Main Screen Floor */ --th-bg-tertiary: #1e2a38; /* Input Well / Raised surface */ --th-border: rgba(245,245,240,0.1); /* Subtle Separation lines */ --th-bg-glow-main: rgba(62, 207, 207, 0.08); --th-bg-glow-soft: rgba(62, 207, 207, 0.05); --th-bg-particle: rgba(62, 207, 207, 0.22); --th-bg-particle-soft: rgba(62, 207, 207, 0.14); /* --- Text Colors --- */ --th-text-primary: #f5f5f0; /* Headers / Active Text */ --th-text-secondary: rgba(245,245,240,0.6); /* Body Text / Secondary info */ --th-text-light: rgba(245,245,240,0.3); /* Timestamps / Placeholders */ /* --- Chat Bubble Gradients --- */ /* Lumi: Bioluminescent Teal Glass */ --th-gradient-lumi: linear-gradient(135deg, rgba(62, 207, 207, 0.35) 0%, rgba(62, 207, 207, 0.15) 100%); /* User: Deep Charcoal */ --th-gradient-user: linear-gradient(135deg, rgba(30, 42, 56, 0.8) 0%, rgba(13, 17, 23, 0.9) 100%); /* --- Functional / Semantic Tokens --- */ --th-success: var(--th-primary); --th-error: #F87171; --th-warning: #FBBF24; --th-info: #60A5FA; /* --- Design System Tokens (Standardized) --- */ --th-radius-sm: 8px; --th-radius-md: 12px; --th-radius-lg: 20px; --th-radius-xl: 28px; /* Glassmorphism Logic */ --th-blur: 12px; /* Transitions */ --th-transition-fast: 0.2s ease; --th-transition-slow: 0.5s ease; /* Z-Index Hierarchy */ --th-z-low: 1; --th-z-mid: 10; --th-z-nav: 100; --th-z-modal: 200; --th-z-overlay: 300; /* Safe-area insets (Android 15+ edge-to-edge / iOS notch) */ --th-safe-top: env(safe-area-inset-top, 0px); --th-safe-bottom: env(safe-area-inset-bottom, 0px); --th-safe-left: env(safe-area-inset-left, 0px); --th-safe-right: env(safe-area-inset-right, 0px); } /* ============================================ LIGHT MODE OVERRIDES (Triggered by adding .light-mode class to the body) ============================================ */ /* This selector works whether the class is on or */ .light-mode { --th-bg-primary: #FFFFFF; --th-bg-secondary: #F5F7FA; --th-bg-tertiary: #E8EEF5; --th-text-primary: #1A1C21; --th-text-secondary: #4A4D55; --th-border: rgba(0, 0, 0, 0.1); --th-primary: #3ECFCF; --th-bg-glow-main: rgba(62, 207, 207, 0.12); --th-bg-glow-soft: rgba(62, 207, 207, 0.08); --th-bg-particle: rgba(62, 207, 207, 0.28); --th-bg-particle-soft: rgba(62, 207, 207, 0.18); } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { :root { --th-transition-fast: 0s; --th-transition-slow: 0s; --th-blur: 0px; } }