/* ============================================================ Skybound — Base Design System Design tokens, resets, typography, shared components ============================================================ */ /* ── Google Fonts ────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── Design Tokens ───────────────────────────────────────── */ :root { /* Colours */ --bg: #0f172a; --surface: #1e293b; --surface-2: #243047; --accent: #3b82f6; --accent-dark: #2563eb; --accent-glow: rgba(59, 130, 246, 0.35); --cyan: #0ea5e9; --text: #f8fafc; --text-muted: #94a3b8; --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --danger: #ef4444; --warning: #f59e0b; --success: #22c55e; /* Surface / overlay backgrounds (were hardcoded navy; var-ized so the airline environment can repaint them in one place — see body.airline-env) */ --glass-bg: rgba(15, 23, 42, 0.85); /* .glass utility */ --panel-bg: rgba(15, 23, 42, 0.96); /* notif panel, map popups, plane labels */ --dropdown-bg: rgba(15, 23, 42, 0.88); /* user dropdown, badges, map controls */ --surface-solid: #1e293b; /* solid card/route surfaces */ --accent-wash: rgba(59, 130, 246, 0.10); /* nav active / route gradient / tints */ --accent-wash-strong: rgba(59, 130, 246, 0.07); --accent-border: rgba(59, 130, 246, 0.30); /* accent-tinted borders */ /* RGB triples so page CSS can write rgba(var(--accent-rgb), ) and have the airline environment recolour every accent tint losslessly */ --accent-rgb: 59, 130, 246; --cyan-rgb: 14, 165, 233; /* Typography */ --font: 'Inter', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; /* Spacing */ --radius: 10px; --radius-lg: 16px; --radius-full: 9999px; /* Shadows */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px var(--accent-glow); /* Transitions */ --transition: 200ms ease; } /* ── Airline environment theme override ────────────────────── Baked onto on every /airline* page (desktop + mobile) EXCEPT the public airline-profile. Only this block changes — the personal palette in :root is untouched, so personal pages are unaffected. Everything (shell, glass, overlays, accents) is driven by the variables above, so this single override repaints the whole airline environment. */ body.airline-env { --bg: #0c1f17; /* deep forest */ --surface: #143022; --surface-2: #1b3d2c; --accent: #10b981; /* emerald */ --accent-dark: #059669; --accent-glow: rgba(16, 185, 129, 0.35); --cyan: #14b8a6; /* teal */ --glass-bg: rgba(12, 31, 23, 0.85); --panel-bg: rgba(12, 31, 23, 0.96); --dropdown-bg: rgba(12, 31, 23, 0.88); --surface-solid: #143022; --accent-wash: rgba(16, 185, 129, 0.12); --accent-wash-strong: rgba(16, 185, 129, 0.08); --accent-border: rgba(16, 185, 129, 0.30); --accent-rgb: 16, 185, 129; --cyan-rgb: 20, 184, 166; /* --text, --text-muted, --danger, --warning, --success unchanged */ } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); background-color: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; } /* Ensure dropdown options render with theme colors in all browsers. Without this, some browsers paint the open