/* ============================================ DESIGN TOKENS — RunwayCalc Design System ============================================ A centralized design-token file that powers both the landing page and the calculator app. Switching themes only requires toggling the [data-theme="dark"] attribute on . ============================================ */ :root { /* ---- Typography ---- */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Outfit', var(--font-primary); --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ---- Font Sizes (fluid) ---- */ --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem); --fs-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --fs-lg: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); --fs-xl: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem); --fs-2xl: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); --fs-3xl: clamp(3rem, 2.2rem + 3vw, 5rem); /* ---- Font Weights ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- Spacing Scale ---- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* ---- Border Radius ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px; --radius-circle: 50%; /* ---- Shadows (Light Theme) ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.08); --shadow-glow-primary: 0 0 30px rgba(99, 102, 241, 0.35); --shadow-glow-success: 0 0 30px rgba(16, 185, 129, 0.35); --shadow-glow-danger: 0 0 30px rgba(239, 68, 68, 0.35); /* ---- Transitions ---- */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Z-Index Scale ---- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ---- Breakpoints (for reference in JS) ---- */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; /* ============================== LIGHT THEME (default) ============================== */ --color-bg-primary: #f8f9fc; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f1f3f9; --color-bg-elevated: #ffffff; --color-bg-glass: rgba(255, 255, 255, 0.7); --color-bg-glass-heavy: rgba(255, 255, 255, 0.85); --color-text-primary: #1a1d2e; --color-text-secondary: #4b5072; --color-text-tertiary: #7c82a5; --color-text-muted: #a0a5c3; --color-text-inverse: #ffffff; --color-border-light: rgba(0, 0, 0, 0.06); --color-border-default: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.18); /* ---- Accent Palette ---- */ --color-primary: #6366f1; --color-primary-hover: #5558e6; --color-primary-light: #eef2ff; --color-primary-alpha: rgba(99, 102, 241, 0.12); --color-success: #10b981; --color-success-hover: #0ea570; --color-success-light: #ecfdf5; --color-success-alpha: rgba(16, 185, 129, 0.12); --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: #fffbeb; --color-warning-alpha: rgba(245, 158, 11, 0.12); --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-light: #fef2f2; --color-danger-alpha: rgba(239, 68, 68, 0.12); --color-info: #3b82f6; --color-info-light: #eff6ff; /* ---- Gradients ---- */ --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%); --gradient-hero: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); --gradient-safe: linear-gradient(135deg, #10b981 0%, #34d399 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%); --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%); --gradient-mesh: radial-gradient(at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(167, 139, 250, 0.04) 0%, transparent 50%); /* ---- Input ---- */ --input-bg: #ffffff; --input-border: var(--color-border-default); --input-focus-ring: rgba(99, 102, 241, 0.25); /* ---- Chart ---- */ --chart-line: var(--color-primary); --chart-fill: rgba(99, 102, 241, 0.1); --chart-grid: rgba(0, 0, 0, 0.06); --chart-text: var(--color-text-tertiary); } /* ============================== DARK THEME ============================== */ [data-theme="dark"] { --color-bg-primary: #0f1117; --color-bg-secondary: #181b25; --color-bg-tertiary: #1e2130; --color-bg-elevated: #222639; --color-bg-glass: rgba(24, 27, 37, 0.75); --color-bg-glass-heavy: rgba(24, 27, 37, 0.9); --color-text-primary: #eef0f6; --color-text-secondary: #b0b5d0; --color-text-tertiary: #7c82a5; --color-text-muted: #5a5f7d; --color-text-inverse: #0f1117; --color-border-light: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.18); --color-primary-light: rgba(99, 102, 241, 0.15); --color-primary-alpha: rgba(99, 102, 241, 0.2); --color-success-light: rgba(16, 185, 129, 0.15); --color-success-alpha: rgba(16, 185, 129, 0.2); --color-warning-light: rgba(245, 158, 11, 0.15); --color-warning-alpha: rgba(245, 158, 11, 0.2); --color-danger-light: rgba(239, 68, 68, 0.15); --color-danger-alpha: rgba(239, 68, 68, 0.2); --color-info-light: rgba(59, 130, 246, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25); --gradient-card: linear-gradient(145deg, rgba(34,38,57,0.9) 0%, rgba(30,33,48,0.6) 100%); --gradient-mesh: radial-gradient(at 20% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(167, 139, 250, 0.06) 0%, transparent 50%); --input-bg: #1e2130; --input-border: var(--color-border-default); --input-focus-ring: rgba(99, 102, 241, 0.35); --chart-fill: rgba(99, 102, 241, 0.15); --chart-grid: rgba(255, 255, 255, 0.06); --chart-text: var(--color-text-tertiary); }