/* ═══════════════════════════════════════════
   base.css — FleetOS v4 Design System
   Inspired by Axion Track aesthetic
   Supports dark + light mode via [data-theme]
═══════════════════════════════════════════ */

/* ── DARK THEME (default) ─────────────── */
:root,
[data-theme="dark"] {
  --bg:          #0e1117;
  --bg2:         #151b27;
  --bg3:         #1c2333;
  --bg4:         #232d42;
  --bg-hover:    rgba(255,255,255,0.04);
  --bg-active:   rgba(99,102,241,0.12);

  --glass:       rgba(255,255,255,0.05);
  --glass-h:     rgba(255,255,255,0.08);

  --border:      rgba(255,255,255,0.09);
  --border-s:    rgba(255,255,255,0.055);
  --border-m:    rgba(255,255,255,0.13);

  /* Brand — indigo primary */
  --primary:     #6366f1;
  --primary-d:   #4f46e5;
  --primary-l:   rgba(99,102,241,0.15);
  --primary-bd:  rgba(99,102,241,0.3);

  /* Semantic */
  --success:     #10b981;
  --success-bg:  rgba(16,185,129,0.13);
  --success-bd:  rgba(16,185,129,0.22);
  --warn:        #f59e0b;
  --warn-bg:     rgba(245,158,11,0.13);
  --warn-bd:     rgba(245,158,11,0.22);
  --danger:      #ef4444;
  --danger-bg:   rgba(239,68,68,0.13);
  --danger-bd:   rgba(239,68,68,0.22);
  --info:        #3b82f6;
  --info-bg:     rgba(59,130,246,0.13);
  --info-bd:     rgba(59,130,246,0.22);

  /* Status */
  --online:      #10b981;
  --idle:        #f59e0b;
  --offline:     #ef4444;

  /* Text */
  --text:        #f1f5f9;
  --text-2:      #94a3b8;
  --muted:       #64748b;
  --muted2:      #475569;

  /* Shadows */
  --shadow:      0 8px 32px rgba(0,0,0,0.5);
  --shadow-s:    0 4px 16px rgba(0,0,0,0.35);
  --shadow-up:   0 -4px 20px rgba(0,0,0,0.4);

  /* Misc */
  --blur:        blur(20px);
  --sidebar-w:   260px;
  --topbar-h:    56px;
  --transition:  0.18s ease;

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   20px;

  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Inter', system-ui, sans-serif;
}

/* ── LIGHT THEME ──────────────────────── */
[data-theme="light"] {
  --bg:          #f8fafc;
  --bg2:         #ffffff;
  --bg3:         #f1f5f9;
  --bg4:         #e2e8f0;
  --bg-hover:    rgba(0,0,0,0.035);
  --bg-active:   rgba(99,102,241,0.08);

  --glass:       rgba(0,0,0,0.03);
  --glass-h:     rgba(0,0,0,0.055);

  --border:      rgba(0,0,0,0.10);
  --border-s:    rgba(0,0,0,0.06);
  --border-m:    rgba(0,0,0,0.15);

  --primary:     #6366f1;
  --primary-d:   #4f46e5;
  --primary-l:   rgba(99,102,241,0.10);
  --primary-bd:  rgba(99,102,241,0.25);

  --success:     #059669;
  --success-bg:  rgba(5,150,105,0.09);
  --success-bd:  rgba(5,150,105,0.18);
  --warn:        #d97706;
  --warn-bg:     rgba(217,119,6,0.09);
  --warn-bd:     rgba(217,119,6,0.18);
  --danger:      #dc2626;
  --danger-bg:   rgba(220,38,38,0.09);
  --danger-bd:   rgba(220,38,38,0.18);
  --info:        #2563eb;
  --info-bg:     rgba(37,99,235,0.09);
  --info-bd:     rgba(37,99,235,0.18);

  --online:      #059669;
  --idle:        #d97706;
  --offline:     #dc2626;

  --text:        #0f172a;
  --text-2:      #475569;
  --muted:       #64748b;
  --muted2:      #94a3b8;

  --shadow:      0 4px 24px rgba(0,0,0,0.10);
  --shadow-s:    0 2px 10px rgba(0,0,0,0.08);
  --shadow-up:   0 -2px 12px rgba(0,0,0,0.08);
}

/* ── Reset ────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

a { color: var(--primary); cursor:pointer; text-decoration:none; }
a:hover { opacity:0.82; }

input, select, textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-l);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--bg3); color: var(--text); }

label {
  display: block;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

h1 { font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-0.3px; }
h2 { font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-0.2px; }
h3 { font-family:var(--font-display); font-size:13.5px; font-weight:600; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-m); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted2); }

::selection { background:rgba(99,102,241,0.2); color:var(--text); }