/* ========================================================================== Lipslay Design System v2 — "Premium Modern" Design tokens (light + dark). Foundation only — does not restyle pages yet. Toggle dark: . ========================================================================== */ :root { /* Brand & accent */ --ls-brand-navy: #0F2A43; --ls-brand-blue: #2563EB; --ls-brand-coral: #E11D48; --ls-coral-strong: #BE123C; --ls-rose: #F43F5E; --ls-emerald: #10B981; --ls-amber: #F59E0B; --ls-gold: #D4AF37; --ls-danger: #EF4444; /* Neutrals */ --ls-bg: #F7F8FA; --ls-surface: #FFFFFF; --ls-surface-2: #F1F5F9; --ls-ink: #0F172A; --ls-text: #334155; --ls-muted: #64748B; --ls-subtle: #94A3B8; --ls-border: #E2E8F0; /* Gradients */ --ls-grad-coral: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%); --ls-grad-hero: linear-gradient(160deg, #0F2A43 0%, #1E3A5F 60%, #2563EB 140%); --ls-glass: rgba(255, 255, 255, 0.72); /* Typography (aligns with fonts already loaded by site layout) */ --ls-font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --ls-font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --ls-font-arabic: 'Noto Naskh Arabic', 'Tajawal', 'Cairo', sans-serif; /* Spacing (4px grid) */ --ls-space-1: 4px; --ls-space-2: 8px; --ls-space-3: 12px; --ls-space-4: 16px; --ls-space-5: 20px; --ls-space-6: 24px; --ls-space-8: 32px; --ls-space-10: 40px; --ls-space-12: 48px; --ls-space-16: 64px; /* Radius */ --ls-radius-sm: 8px; --ls-radius-md: 12px; --ls-radius-lg: 16px; --ls-radius-xl: 24px; --ls-radius-pill: 999px; /* Shadows */ --ls-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ls-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --ls-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --ls-shadow-cta: 0 8px 24px rgba(225, 29, 72, 0.28); /* Motion */ --ls-dur-micro: 150ms; --ls-dur-std: 250ms; --ls-dur-emph: 400ms; --ls-ease: cubic-bezier(0.2, 0, 0, 1); } [data-theme="dark"] { --ls-brand-navy: #E2E8F0; --ls-brand-blue: #3B82F6; --ls-brand-coral: #FB7185; --ls-coral-strong: #FDA4AF; --ls-rose: #FB7185; --ls-emerald: #34D399; --ls-amber: #FBBF24; --ls-danger: #F87171; --ls-bg: #0B1220; --ls-surface: #111827; --ls-surface-2: #1F2937; --ls-ink: #F8FAFC; --ls-text: #E2E8F0; --ls-muted: #94A3B8; --ls-subtle: #64748B; --ls-border: #1F2937; --ls-grad-hero: linear-gradient(160deg, #0B1220 0%, #111827 60%, #1E3A5F 140%); --ls-glass: rgba(17, 24, 39, 0.72); --ls-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ls-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ls-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } /* ========================================================================== Global dark-surface utility — guarantees light text on brand-navy surfaces. Apply to promotional banners so text never falls back to dark ink. ========================================================================== */ .bg-premium-dark { background-color: var(--ls-brand-navy); background-image: linear-gradient(90deg, #0F2A43 0%, #1E3A5F 100%); color: #FFFFFF !important; } .bg-premium-dark h1, .bg-premium-dark h2, .bg-premium-dark h3, .bg-premium-dark h4, .bg-premium-dark h5, .bg-premium-dark h6, .bg-premium-dark p, .bg-premium-dark span, .bg-premium-dark small, .bg-premium-dark strong, .bg-premium-dark em, .bg-premium-dark li, .bg-premium-dark label { color: #FFFFFF !important; }