/* ═══════════════════════════════════════════════════════════════ FLIXABLE THEME — TOKENS Static design tokens: spacing · radius · motion · fonts + Bridge: maps app_settings variables → DS token names ═══════════════════════════════════════════════════════════════ */ /* ─── FONTS ─────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ─── SPACING SCALE (4px base) ───────────────────────────────── */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; } /* ─── RADIUS ─────────────────────────────────────────────────── */ /* --radius injected by app_settings (default 14px) */ :root { --r-xs: 6px; --r-sm: 10px; --r: var(--radius, 14px); --r-lg: 20px; --r-xl: 28px; --r-full: 999px; } /* ─── MOTION ─────────────────────────────────────────────────── */ :root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; } /* ─── FONT FAMILIES ──────────────────────────────────────────── */ /* --font injected by app_settings */ :root { --font-base: 'Cairo', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* Default font — app_settings