/* ============================================================
   BASE.CSS — Dark tactical military theme
   NavyTrack
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500&display=swap');

:root {
  /* Core dark palette */
  --color-bg:            #080C14;
  --color-surface:       #0D1421;
  --color-surface-2:     #111827;
  --color-surface-3:     #1A2235;
  --color-border:        rgba(255,255,255,0.07);
  --color-border-subtle: rgba(255,255,255,0.04);
  --color-border-accent: rgba(0,212,120,0.2);

  /* Text */
  --color-text-primary:   #E8EDF5;
  --color-text-secondary: #7A8BA8;
  --color-text-muted:     #3D5068;

  /* Accent — radar green */
  --color-accent:       #00D478;
  --color-accent-hover: #00B866;
  --color-accent-light: rgba(0,212,120,0.1);
  --color-accent-glow:  rgba(0,212,120,0.3);

  /* Blue radar */
  --color-blue:         #3B82F6;
  --color-blue-light:   rgba(59,130,246,0.1);
  --color-blue-glow:    rgba(59,130,246,0.3);

  /* Navy */
  --color-navy:         #0A1628;
  --color-navy-mid:     #0F1F3D;

  /* Status */
  --color-success:      #00D478;
  --color-success-bg:   rgba(0,212,120,0.08);
  --color-warning:      #F59E0B;
  --color-warning-bg:   rgba(245,158,11,0.08);
  --color-danger:       #EF4444;
  --color-danger-bg:    rgba(239,68,68,0.08);

  /* Type colors */
  --color-adsb:         #3B82F6;
  --color-marine:       #8B5CF6;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Sizing */
  --header-h:     64px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.6);
  --shadow-panel: -4px 0 32px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 20px rgba(0,212,120,0.15);

  --transition-fast: 150ms ease;
  --transition-mid:  250ms ease;
  --transition-slow: 400ms ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.5;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0,212,120,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(59,130,246,0.03) 0%, transparent 50%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
a:hover { opacity: 0.75; }

input, select, button { font-family: var(--font-body); font-size: inherit; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ── LIGHT THEME ── */
body.light {
  background: #F4F5F7;
  background-image: none;
  color: #0D1117;
}
body.light {
  --color-bg:            #F4F5F7;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F8F9FB;
  --color-surface-3:     #ECEEF2;
  --color-border:        rgba(0,0,0,0.08);
  --color-border-subtle: rgba(0,0,0,0.04);
  --color-border-accent: rgba(0,160,80,0.25);
  --color-text-primary:  #0D1117;
  --color-text-secondary:#4A5568;
  --color-text-muted:    #9CA3AF;
  --color-accent:        #00A050;
  --color-accent-hover:  #008040;
  --color-accent-light:  rgba(0,160,80,0.08);
  --color-accent-glow:   rgba(0,160,80,0.2);
  --color-blue:          #2563EB;
  --color-blue-light:    rgba(37,99,235,0.08);
  --color-success:       #00A050;
  --color-success-bg:    rgba(0,160,80,0.08);
  --color-danger:        #DC2626;
  --color-danger-bg:     rgba(220,38,38,0.08);
  --color-warning:       #D97706;
  --color-warning-bg:    rgba(217,119,6,0.08);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.12);
  --shadow-panel: -4px 0 24px rgba(0,0,0,0.10);
}

/* ── LIGHT THEME FIXES ── */
body.light .brand-name { color: #0D1117; }
body.light .brand-sub { color: #6B7280; }
body.light .brand-icon { color: #00A050; filter: none; }
body.light .status-label { color: #4A5568; }
body.light .status-time { color: #6B7280; background: #ECEEF2; border-color: rgba(0,0,0,0.08); }
body.light .btn-icon { background: #ECEEF2; color: #4A5568; border-color: rgba(0,0,0,0.1); }
body.light .btn-icon:hover { background: #E2E8F0; color: #00A050; border-color: rgba(0,160,80,0.3); }
body.light .app-header { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.08); box-shadow: 0 1px 8px rgba(0,0,0,0.08); }
body.light .stat-card::before { background: linear-gradient(90deg, transparent, #00A050, transparent); }
body.light .stat-card::after { background: radial-gradient(circle, rgba(0,160,80,0.06) 0%, transparent 70%); }
body.light .data-source-badge.live { color: #00A050; border-color: rgba(0,160,80,0.3); background: rgba(0,160,80,0.06); }
body.light .status-dot.online { background: #00A050; box-shadow: 0 0 0 2px rgba(0,160,80,0.15), 0 0 8px rgba(0,160,80,0.3); }