/* =========================================================================
   Apeiron Labs — Colors & Type
   Single source of truth for color tokens, type scale, and semantic styles.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Cormorant+Garamond:wght@400;500&display=swap');

:root {
  /* ---------- Brand palette (the logo gradient, decomposed) ----------- */
  --navy-900: #0E1638;       /* deepest — hero bg, depth wells */
  --navy-800: #1B2658;       /* PRIMARY — Apeiron Navy */
  --navy-700: #2E3D78;       /* secondary fill, chart series */
  --navy-600: #4356A0;       /* hover for navy elements */
  --navy-500: #6F80C4;       /* tertiary, muted icons on dark */

  --cyan-700: #1FA3BC;       /* link hover on light */
  --cyan-500: #4FD1E8;       /* PRIMARY accent — active, telemetry */
  --cyan-300: #86E5F1;       /* soft fills, badges */
  --cyan-100: #DDF6FB;       /* faint tint */

  /* ---------- Slate neutrals (DoD-leaning tactical neutrals) ---------- */
  --slate-50:  #F6F8FB;
  --slate-100: #ECEFF5;
  --slate-200: #DCE2EC;
  --slate-300: #BDC6D6;
  --slate-400: #8895AD;
  --slate-500: #5E6B85;
  --slate-600: #404C66;
  --slate-700: #2A344B;
  --slate-800: #161E33;
  --slate-900: #0A0F22;

  /* ---------- Status (telemetry signal palette) ---------- */
  --status-online:  #5EE38A;
  --status-caution: #F4B53D;
  --status-fault:   #E5524F;
  --status-offline: #7C8AA3;

  /* ---------- Semantic — light theme (default) ---------- */
  --bg:            var(--slate-50);
  --surface:       #FFFFFF;
  --surface-2:     var(--slate-100);
  --surface-hover: var(--slate-100);
  --fg-1:          var(--navy-900);
  --fg-2:          var(--slate-600);
  --fg-3:          var(--slate-500);
  --fg-muted:      var(--slate-400);
  --border:        rgba(27, 38, 88, 0.12);
  --border-strong: rgba(27, 38, 88, 0.24);
  --link:          var(--cyan-700);
  --link-hover:    var(--navy-800);
  --accent:        var(--cyan-500);
  --primary:       var(--navy-800);
  --primary-hover: var(--navy-600);

  /* ---------- Spacing scale (8px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(14, 22, 56, 0.08);
  --shadow-2: 0 4px 16px rgba(14, 22, 56, 0.12);
  --shadow-3: 0 12px 32px rgba(14, 22, 56, 0.18);
  --shadow-inset-dark: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro:     120ms;
  --t-std:       220ms;
  --t-panel:     400ms;
  --t-hero:      800ms;

  /* ---------- Type — families ---------- */
  --font-sans:    'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  /* ---------- Type — scale (Major Third 1.250, base 16) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* ---------- Dark theme override ---------- */
[data-theme="dark"], .theme-dark {
  --bg:            var(--navy-900);
  --surface:       #172148;
  --surface-2:     #1F2C5C;
  --surface-hover: #233268;
  --fg-1:          #F2F5FB;
  --fg-2:          #B6C0DA;
  --fg-3:          #8090B5;
  --fg-muted:      #5E6B89;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --link:          var(--cyan-500);
  --link-hover:    var(--cyan-300);
}

/* =========================================================================
   Base reset + body
   ========================================================================= */

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   Semantic typography classes
   ========================================================================= */

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-60);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

h2, .h2 {
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h3, .h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h4, .h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
}

h5, .h5 {
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-18); line-height: var(--lh-base); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-base); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-700);
}

.tagline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.pullquote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  font-style: italic;
}

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.telemetry {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease-out);
}

a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Components
   ========================================================================= */

/* --- Nav --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.nav-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--cyan-500);
  text-decoration: none;
}

.nav-brand:hover { color: var(--cyan-300); text-decoration: none; }

.nav-actions { display: flex; gap: var(--s-3); align-items: center; }

/* --- Container --- */
.container { max-width: 1200px; margin: 0 auto; padding: var(--s-5); }

/* --- Card --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-1);
}

.card-title {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--s-3) 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
  color: #fff;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--fg-2);
}

.btn-ghost:hover {
  color: var(--fg-1);
  text-decoration: none;
}

/* --- Forms --- */
.form-group { margin-bottom: var(--s-4); }

label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-1);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  transition: border-color var(--t-micro) var(--ease-out);
}

input:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 2px rgba(79, 209, 232, 0.15);
}

/* --- Status badge --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: 9999px;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-online  { color: var(--status-online);  background: rgba(94, 227, 138, 0.10); }
.status-caution { color: var(--status-caution); background: rgba(244, 181, 61,  0.10); }
.status-fault   { color: var(--status-fault);   background: rgba(229, 82,  79,  0.10); }
.status-offline { color: var(--status-offline); background: rgba(124, 138, 163, 0.10); }

/* --- Dashboard layout --- */
.page {
  padding: var(--s-5);
  max-width: 1400px;
  margin: 0 auto;
}

.page-section {
  margin-bottom: var(--s-5);
}

.hull-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--s-4);
  align-items: start;
}

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* hull status card internals */
.hull-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}

.hull-number {
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--cyan-500);
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
}

.stat-item:last-child { border-bottom: none; }

/* results table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.data-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-strong);
}

.data-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.data-table tr:last-child td { border-bottom: none; }

/* map card — no internal padding so leaflet fills edge-to-edge */
.card-map { padding: 0; overflow: hidden; }
.card-map .card-title { padding: var(--s-3) var(--s-4); margin: 0; }
#map { height: 440px; }

/* --- Error / alert --- */
.alert-error {
  color: var(--status-fault);
  font-size: var(--fs-14);
  padding: var(--s-2) var(--s-3);
  background: rgba(229, 82, 79, 0.08);
  border: 1px solid rgba(229, 82, 79, 0.24);
  border-radius: var(--radius-sm);
}