/* ══════════════════════════════════════════════════════════════════════ Fleet-Eye Design System Shared tokens + base components for dashboard.html and share.html. Clean, neutral SaaS aesthetic — light surfaces, restrained shadows, one accent color, no emoji/gradients-as-decoration. ══════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --bg: #eef1f7; --surface: #ffffff; --surface-2: #f4f6fa; --surface-sunken: #e9edf4; --overlay: rgba(15, 23, 42, 0.55); /* Borders */ --border: #d3dae4; --border-strong: #97a3b6; /* Text */ --text: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-accent: #ffffff; /* Accent (primary brand action color) */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff; --accent-soft-border: #c7d2fe; --accent-text: #4338ca; /* Semantic */ --success: #16a34a; --success-soft: #f0fdf4; --success-soft-border: #bbf7d0; --success-text: #15803d; --warning: #d97706; --warning-soft: #fffbeb; --warning-soft-border: #fde68a; --warning-text: #b45309; --danger: #dc2626; --danger-soft: #fef2f2; --danger-soft-border: #fecaca; --danger-text: #b91c1c; --info: #0284c7; --info-soft: #f0f9ff; --info-soft-border: #bae6fd; --info-text: #0369a1; --purple: #7c3aed; --purple-soft: #f5f3ff; --purple-soft-border: #ddd6fe; --purple-text: #6d28d9; /* Status — offline is red: a vehicle that stopped reporting is a problem to notice, not a neutral state to fade out. */ --status-online: #16a34a; --status-connecting: #d97706; --status-offline: #dc2626; --status-offline-soft: var(--danger-soft); --status-offline-soft-border: var(--danger-soft-border); --status-offline-text: var(--danger-text); /* Navigation chrome follows the active theme */ --navbar-bg: #ffffff; --navbar-border: #d3dae4; --navbar-text: #0f172a; --navbar-text-muted: #64748b; /* Map surfaces */ --map-bg: #e9edf4; --marker-label-bg: #ffffff; --marker-label-text: #0f172a; /* Geometry */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.09); --shadow: 0 10px 26px rgba(15, 23, 42, 0.12); --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.22); /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Font */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace; color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════ Dark theme Everything above is expressed as tokens, so the dark theme is a re-declaration of those tokens rather than a parallel stylesheet. Applied via ; `data-theme="light"` pins light so the OS preference below can't override an explicit choice. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #0a0f1a; --surface: #131c2e; --surface-2: #182236; --surface-sunken: #1e2940; --overlay: rgba(2, 6, 23, 0.72); --border: #29344a; --border-strong: #414f6a; --text: #f1f5f9; --text-secondary: #c3cddc; --text-muted: #8d9bb0; --text-on-accent: #ffffff; --accent: #6366f1; --accent-hover: #7c7ff5; --accent-soft: rgba(99, 102, 241, 0.18); --accent-soft-border: rgba(129, 140, 248, 0.42); --accent-text: #b3bcff; --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.15); --success-soft-border: rgba(74, 222, 128, 0.34); --success-text: #6ee7a0; --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.15); --warning-soft-border: rgba(251, 191, 36, 0.34); --warning-text: #fbbf24; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.16); --danger-soft-border: rgba(248, 113, 113, 0.36); --danger-text: #fca5a5; --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.15); --info-soft-border: rgba(125, 211, 252, 0.34); --info-text: #7dd3fc; --purple: #a78bfa; --purple-soft: rgba(167, 139, 250, 0.16); --purple-soft-border: rgba(196, 181, 253, 0.34); --purple-text: #c4b5fd; --status-online: #22c55e; --status-connecting: #f59e0b; --status-offline: #ef4444; /* The navbar lifts off the page instead of matching it */ --navbar-bg: #131c2e; --navbar-border: #29344a; --navbar-text: #f8fafc; --navbar-text-muted: #8d9bb0; --map-bg: #0a0f1a; --marker-label-bg: #1e2940; --marker-label-text: #f1f5f9; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 10px 26px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.62); color-scheme: dark; } /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } /* Thin, unobtrusive scrollbars everywhere */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.2; cursor: pointer; /* .btn is used on as well as