/* ========================================================================== variables.css — Sybo.ai marketing site Design tokens extracted directly from the Sybo.ai React Native app (src/theme/Colors.js, src/assets/fonts). Brand = friendly sky-blue with four vibrant conversation "mode" accents. Mobile-first, theme-aware. ========================================================================== */ :root { /* ---- Brand palette (from app dashboard + logo) ------------------------ */ --brand-500: #1E8EE0; /* dashboardSkyTop — primary brand blue */ --brand-600: #1976ED; /* chatAccentBlue */ --brand-700: #0B6FC9; --brand-400: #4DA3FF; /* dashboardModeText — light brand blue */ --brand-300: #8FC4FF; --indigo-500: #5265FF; /* dodgerBlue */ --accent-500: #22C55E; /* voice green (secondary accent) */ --accent-400: #34D77A; --pink-500: #F43F5E; /* ---- Conversation mode accents (app's core identity) ------------------ */ --mode-text: #4DA3FF; --mode-text-bg: #E7F1FF; --mode-voice: #22C55E; --mode-voice-bg: #E6F8EC; --mode-avatar: #F59E0B; --mode-avatar-bg: #FEF3DC; --mode-assistant: #A855F7; --mode-assistant-bg: #F1E6FE; --mode-twin: #EC4899; --mode-twin-bg: #FCE7F3; --mode-choose: #06B6D4; --mode-choose-bg: #DEF5FA; --mode-image: #6366F1; --mode-image-bg: #E8EAFE; --mode-share: #14B8A6; --mode-share-bg: #DDF5F1; --memory-violet: #7C3AED; /* ---- Gradients -------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #1E8EE0 0%, #5265FF 100%); --gradient-sky: linear-gradient(180deg, #1E8EE0 0%, #4DA3FF 100%); --gradient-accent: linear-gradient(135deg, #4DA3FF 0%, #22C55E 100%); --gradient-soft: linear-gradient(135deg, #4DA3FF 0%, #1E8EE0 100%); --gradient-text: linear-gradient(120deg, #1976ED 0%, #4DA3FF 55%, #5265FF 100%); /* ---- Neutral scale (light theme — matches app dashboard) -------------- */ --bg: #F4F7FB; /* dashboardScreenBg */ --bg-elevated: #FFFFFF; /* dashboardCardBg */ --bg-muted: #EEF3FA; --surface: rgba(255, 255, 255, 0.72); --surface-border: rgba(15, 23, 42, 0.08); --text: #0F172A; /* dashboardTextPrimary */ --text-muted: #64748B; /* dashboardTextSecondary */ --text-faint: #94A3B8; /* dashboardTextMuted */ --border: #E2E8F0; /* dashboardDivider */ --shadow-color: 213deg 45% 55%; /* ---- Elevation / soft shadows ----------------------------------------- */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.1), 0 2px 8px hsl(var(--shadow-color) / 0.08); --shadow-md: 0 6px 16px hsl(var(--shadow-color) / 0.12), 0 10px 30px hsl(var(--shadow-color) / 0.1); --shadow-lg: 0 14px 32px hsl(var(--shadow-color) / 0.16), 0 28px 60px hsl(var(--shadow-color) / 0.12); --shadow-glow: 0 10px 40px hsl(210deg 90% 55% / 0.4); /* ---- Typography (app fonts: Poppins + Roboto) ------------------------- */ --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-display: 'Poppins', var(--font-sans); --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: clamp(1.75rem, 4vw, 2.25rem); --fs-3xl: clamp(2rem, 5vw, 3rem); --fs-hero: clamp(2.25rem, 6vw, 3.5rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.65; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- Spacing scale (8pt) ---------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Radii (app uses generous rounding) ------------------------------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Layout ----------------------------------------------------------- */ --container: 1200px; --container-narrow: 820px; --header-h: 72px; /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.18s; --t-base: 0.3s; --t-slow: 0.6s; /* ---- Z-index scale ---------------------------------------------------- */ --z-header: 100; --z-menu: 200; --z-toTop: 150; --z-progress: 300; --z-lightbox: 400; --z-toast: 500; color-scheme: light; } /* ========================================================================== Dark theme — deep slate to match a night-mode app shell ========================================================================== */ [data-theme='dark'] { --bg: #0A1120; --bg-elevated: #131C2E; --bg-muted: #1B2740; --surface: rgba(19, 28, 46, 0.6); --surface-border: rgba(148, 163, 184, 0.14); --text: #F1F5F9; --text-muted: #A6B3C6; --text-faint: #6B7A90; --border: rgba(148, 163, 184, 0.18); --shadow-color: 220deg 60% 3%; --brand-500: #4DA3FF; --brand-600: #6AB2FF; --mode-text-bg: rgba(77, 163, 255, 0.16); --mode-voice-bg: rgba(34, 197, 94, 0.16); --mode-avatar-bg: rgba(245, 158, 11, 0.16); --mode-assistant-bg: rgba(168, 85, 247, 0.18); --mode-twin-bg: rgba(236, 72, 153, 0.16); --mode-choose-bg: rgba(6, 182, 212, 0.16); --mode-image-bg: rgba(99, 102, 241, 0.18); --mode-share-bg: rgba(20, 184, 166, 0.16); --surface: rgba(19, 28, 46, 0.6); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.5), 0 2px 8px hsl(var(--shadow-color) / 0.4); --shadow-md: 0 6px 16px hsl(var(--shadow-color) / 0.55), 0 10px 30px hsl(var(--shadow-color) / 0.4); --shadow-lg: 0 14px 32px hsl(var(--shadow-color) / 0.6), 0 28px 60px hsl(var(--shadow-color) / 0.45); --shadow-glow: 0 10px 44px hsl(210deg 90% 60% / 0.45); color-scheme: dark; } /* Honor OS preference before JS runs, only when user hasn't chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0A1120; --bg-elevated: #131C2E; --bg-muted: #1B2740; --surface: rgba(19, 28, 46, 0.6); --surface-border: rgba(148, 163, 184, 0.14); --text: #F1F5F9; --text-muted: #A6B3C6; --text-faint: #6B7A90; --border: rgba(148, 163, 184, 0.18); --shadow-color: 220deg 60% 3%; --brand-500: #4DA3FF; color-scheme: dark; } }