/* VMS-Sailor Design Tokens - canonical reference for all UI sprints. */

:root {
  /* ---- Colors: Deep Ocean ---- */
  --c-abyss: #04111F;
  --c-midnight: #0A1A2E;
  --c-steel: #1A2B42;
  --c-iron: #2C3E5C;
  --c-fog: #7C8B9F;
  --c-sand: #E6EAF0;
  --c-foam: #F2F5F9;
  --c-cyan: #00D9FF;
  --c-cyan-deep: #1B7FB5;
  --c-horizon: #5BC0EB;

  /* ---- Semantic ---- */
  --c-ok: #00E08A;
  --c-info: #5BC0EB;
  --c-warn: #FFB020;
  --c-high: #FF8030;
  --c-emergency: #FF3B47;
  --c-emergency-deep: #A11220;

  /* ---- Gradients ---- */
  --g-deep-sea: linear-gradient(135deg, #04111F 0%, #0A1A2E 60%, #1A2B42 100%);
  --g-horizon: linear-gradient(180deg, #04111F 0%, #1B3E6E 60%, #3A6BA8 90%, #5BC0EB 100%);
  --g-cyan-glow: radial-gradient(circle at 50% 50%, rgba(0,217,255,0.4) 0%, transparent 70%);
  --g-glass: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --g-glass-edge: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  --g-emergency: linear-gradient(135deg, #FF3B47, #A11220);
  --g-warn: linear-gradient(135deg, #FFB020, #C0760F);
  --g-cyan: linear-gradient(135deg, #00D9FF 0%, #5BC0EB 50%, #1B7FB5 100%);
  --g-ok: linear-gradient(135deg, #00E08A, #007F4E);

  /* ---- Spacing 4px 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;

  /* ---- Radius ---- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 9999px;

  /* ---- Elevation ---- */
  --e-1: 0 1px 3px rgba(0,0,0,0.32);
  --e-2: 0 4px 12px rgba(0,0,0,0.40);
  --e-3: 0 8px 24px rgba(0,0,0,0.50);
  --e-4: 0 16px 48px rgba(0,0,0,0.60);
  --e-5: 0 32px 80px rgba(0,0,0,0.70);
  --glow-cyan: 0 0 24px rgba(0,217,255,0.45);
  --glow-warn: 0 0 24px rgba(255,176,32,0.45);
  --glow-emergency: 0 0 32px rgba(255,59,71,0.55);
  --inner-stroke: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ---- Typography families ---- */
  --f-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--g-deep-sea);
  color: var(--c-sand);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
body::before {
  /* subtle horizon glow at the top */
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 20% -20%, rgba(0,217,255,0.10), transparent 50%),
              radial-gradient(ellipse at 80% 110%, rgba(91,192,235,0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--c-cyan); text-decoration: none; }

/* ---- Utility classes ---- */
.mono { font-family: var(--f-mono); }
.display { font-family: var(--f-display); }
.overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-fog);
}
.caption {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--c-fog);
}

/* ---- Cards ---- */
.card {
  background: var(--c-midnight);
  border: 1px solid var(--c-steel);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--e-2);
}
.card-glass {
  background: var(--g-glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-3);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--e-3), var(--inner-stroke);
  padding: var(--s-5);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 96px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--r-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 120ms var(--ease-standard),
              box-shadow 120ms var(--ease-standard),
              background 120ms var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--g-cyan);
  color: #04111F;
  box-shadow: var(--glow-cyan);
}
.btn-secondary {
  background: transparent;
  color: var(--c-sand);
  border: 1px solid var(--c-iron);
}
.btn-secondary:hover { background: var(--c-steel); }
.btn-ghost {
  background: transparent;
  color: var(--c-cyan);
  min-width: 0;
  padding: 8px 12px;
}
.btn-danger {
  background: var(--g-emergency);
  color: var(--c-foam);
  box-shadow: var(--glow-emergency);
}
.btn-icon {
  min-width: 0;
  padding: 8px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--c-iron);
  border-radius: var(--r-2);
  color: var(--c-sand);
}
.btn-icon:hover { background: var(--c-steel); }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.badge-emergency { background: var(--c-emergency); color: #FFFFFF; box-shadow: inset 0 0 0 1px #FF8090; }
.badge-high { background: var(--c-high); color: #04111F; box-shadow: inset 0 0 0 1px #FFA060; }
.badge-low { background: var(--c-warn); color: #04111F; box-shadow: inset 0 0 0 1px #FFCB60; }
.badge-info { background: var(--c-info); color: #04111F; box-shadow: inset 0 0 0 1px #8DDBF2; }
.badge-ok { background: var(--c-ok); color: #04111F; box-shadow: inset 0 0 0 1px #5BEFB8; }
.badge-muted { background: var(--c-steel); color: var(--c-fog); }

/* ---- Tag (chip) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--c-steel);
  border: 1px solid var(--c-iron);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--c-sand);
}

/* ---- Pulse animation for active critical alarms ---- */
@keyframes pulseEmergency {
  0%, 100% { box-shadow: var(--glow-emergency); }
  50% { box-shadow: 0 0 48px rgba(255,59,71,0.85); }
}
.pulse-emergency { animation: pulseEmergency 1200ms ease-in-out infinite; }

@keyframes pulseWarn {
  0%, 100% { box-shadow: var(--glow-warn); }
  50% { box-shadow: 0 0 40px rgba(255,176,32,0.7); }
}
.pulse-warn { animation: pulseWarn 1600ms ease-in-out infinite; }

/* ---- Dot indicator ---- */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-fog);
}
.dot.ok { background: var(--c-ok); box-shadow: 0 0 8px rgba(0,224,138,0.6); }
.dot.warn { background: var(--c-warn); box-shadow: 0 0 8px rgba(255,176,32,0.6); }
.dot.emergency {
  background: var(--c-emergency);
  box-shadow: 0 0 12px rgba(255,59,71,0.8);
  animation: pulseEmergency 1200ms ease-in-out infinite;
}
.dot.cyan { background: var(--c-cyan); box-shadow: 0 0 8px rgba(0,217,255,0.6); }

/* ---- App shell common ---- */
.app-root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}