/* Design tokens — palettes copied verbatim from apps/mobile/src/theme.ts. The active theme is selected by a [data-theme="dark"|"light"] attribute on , set in JS from settings + prefers-color-scheme. Dark is the default brand look. */ :root, :root[data-theme="dark"] { --scheme: dark; --bg: #0b1020; --card: #161c2e; --card-alt: #1d2540; --text: #e6e9f0; --subtext: #9aa3b8; --border: #222a40; --accent: #4f8cff; --danger: #e74c3c; --on-color: #0b1020; } :root[data-theme="light"] { --scheme: light; --bg: #f4f6fb; --card: #ffffff; --card-alt: #eef1f8; --text: #0b1020; --subtext: #5b647a; --border: #e2e7f0; --accent: #2563eb; --danger: #dc2626; --on-color: #ffffff; } :root { /* FAA flight-category colors — identical light/dark. */ --cat-vfr: #2ecc71; --cat-mvfr: #3498db; --cat-ifr: #e74c3c; --cat-lifr: #b14fd8; --cat-unknown: #6b7280; --amber: #f59e0b; /* Spacing / radii. */ --r-card: 16px; --r-badge: 8px; --r-chip: 10px; --r-pill: 999px; --r-btn: 11px; --r-input: 11px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --header-h: 54px; --tabbar-h: 58px; --maxw: 760px; /* Type scale. */ --fs-h1: 25px; --fs-h2: 18px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 11px; /* Elevation. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Lighter shadows read better on the light theme. */ :root[data-theme="light"] { --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --shadow-md: 0 12px 28px rgba(16, 24, 40, 0.14); }