/* Relio Marketing — Design Tokens Colors match lib/core/theme/app_theme.dart exactly. Default theme is dark; [data-theme] on is set pre-paint by the inline snippet in each page's . */ :root { --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-full: 999px; --primary: #00C389; --primary-alt: #00A676; --primary-rgb: 0, 195, 137; --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1200px; --container-pad: 24px; --ease: cubic-bezier(.16,1,.3,1); --dur-fast: 150ms; --dur: 300ms; --dur-slow: 600ms; --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --text-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.375rem); --text-3xl: clamp(2.125rem, 1.8rem + 1.6vw, 3.125rem); --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4.25rem); --text-hero: clamp(2.5rem, 1.7rem + 4vw, 5.5rem); --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -8px rgba(0,0,0,.16); --shadow-float: 0 32px 80px -20px rgba(0,0,0,.45); --shadow-pop: 0 12px 32px -8px rgba(var(--primary-rgb), .35); } :root, html[data-theme="dark"] { --bg: #121212; --bg-elevated: #171717; --surface: #1E1E1E; --surface-2: #262626; --ink: #FFFFFF; --ink-secondary: #9CA3AF; --ink-tertiary: #8A93A3; --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16); --scrim: rgba(0,0,0,.55); --grain-opacity: 0.05; --loop-watermark-opacity: 0.035; color-scheme: dark; } html[data-theme="light"] { --bg: #F8F9FA; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F2F4; --ink: #1E1E1E; --ink-secondary: #4B5563; --ink-tertiary: #667085; --border: #E5E7EB; --border-strong: #D1D5DB; --scrim: rgba(255,255,255,.6); --grain-opacity: 0.035; --loop-watermark-opacity: 0.05; color-scheme: light; }