/* Flightz design tokens — shadcn/ui-derived palette (zinc base). Two themes: day (blue/green accent) and night (gold accent). Theme is applied via [data-theme="day"|"night"] on . */ :root { --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace; --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-lg: calc(var(--radius) + 4px); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-glow: 0 0 24px 0 var(--accent-glow); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 320ms; } /* ---------- NIGHT (default): zinc dark, gold accent ---------- */ :root, [data-theme="night"] { color-scheme: dark; --background: hsl(240 10% 3.9%); --foreground: hsl(0 0% 98%); --card: hsl(240 10% 5.5%); --card-foreground: hsl(0 0% 98%); --popover: hsl(240 10% 6.5%); --popover-foreground: hsl(0 0% 98%); --muted: hsl(240 5% 11%); --muted-foreground: hsl(240 5% 64.9%); --border: hsl(240 6% 15%); --input: hsl(240 6% 17%); --ring: hsl(45 90% 55%); --primary: hsl(45 92% 58%); --primary-foreground: hsl(45 90% 8%); --secondary: hsl(240 4% 16%); --secondary-foreground: hsl(0 0% 98%); --destructive: hsl(0 72% 51%); --destructive-foreground: hsl(0 0% 98%); --accent: hsl(45 92% 58%); /* gold */ --accent-soft: hsl(45 92% 58% / 0.14); --accent-glow: hsl(45 92% 58% / 0.35); --accent-2: hsl(35 90% 52%); /* amber */ --ok: hsl(150 65% 45%); --warn: hsl(35 92% 55%); --danger: hsl(0 72% 55%); --map-filter: none; --trail-color: #f5c542; --plane-color: #f5c542; } /* ---------- DAY: light, blue/green accent ---------- */ [data-theme="day"] { color-scheme: light; --background: hsl(200 33% 97%); --foreground: hsl(224 24% 12%); --card: hsl(0 0% 100%); --card-foreground: hsl(224 24% 12%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(224 24% 12%); --muted: hsl(205 30% 92%); --muted-foreground: hsl(220 9% 42%); --border: hsl(210 20% 86%); --input: hsl(210 20% 84%); --ring: hsl(200 90% 42%); --primary: hsl(200 90% 40%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(160 45% 92%); --secondary-foreground: hsl(170 60% 18%); --destructive: hsl(0 74% 48%); --destructive-foreground: hsl(0 0% 100%); --accent: hsl(200 90% 40%); /* ocean blue */ --accent-soft: hsl(200 90% 40% / 0.12); --accent-glow: hsl(200 90% 45% / 0.30); --accent-2: hsl(160 70% 36%); /* green */ --ok: hsl(150 70% 33%); --warn: hsl(32 95% 44%); --danger: hsl(0 74% 48%); --map-filter: none; --trail-color: #0e7490; --plane-color: #0369a1; } /* ---------- base reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font: inherit; cursor: pointer; } input, select { font: inherit; } a { color: inherit; } ::selection { background: var(--accent-soft); } /* ---------- shared primitives (shadcn-flavoured) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1.25rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; transition: transform 160ms var(--ease-out), box-shadow 160ms, background 160ms, opacity 160ms; user-select: none; white-space: nowrap; } .btn:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); } .btn-outline:hover { background: var(--muted); box-shadow: none; } .btn-ghost { background: transparent; color: var(--muted-foreground); } .btn-ghost:hover { background: var(--muted); color: var(--foreground); box-shadow: none; } .btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8rem; } .btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--radius); } .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .badge-danger { background: hsl(0 72% 51% / 0.15); color: var(--danger); border-color: hsl(0 72% 51% / 0.4); } .badge-ok { background: hsl(150 65% 45% / 0.14); color: var(--ok); border-color: hsl(150 65% 45% / 0.35); } .badge-warn { background: hsl(35 92% 55% / 0.14); color: var(--warn); border-color: hsl(35 92% 55% / 0.35); } .input { height: 2.5rem; width: 100%; padding: 0 0.9rem; border-radius: var(--radius); border: 1px solid var(--input); background: var(--card); color: var(--foreground); transition: border-color 160ms, box-shadow 160ms; } .input::placeholder { color: var(--muted-foreground); } .input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); } .kbd { font-family: var(--font-mono); font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 5px; background: var(--muted); border: 1px solid var(--border); color: var(--muted-foreground); } .sep { height: 1px; background: var(--border); border: 0; margin: 0; } /* the hidden attribute must always win, even over display:flex components */ [hidden] { display: none !important; } .mono { font-family: var(--font-mono); } .muted { color: var(--muted-foreground); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }