/* ============================================================
   Uptime Tycoon — design system
   NOC / terminal aesthetic: near-black blue chrome, phosphor
   LED accents, squared display type, mono numerals.
   ============================================================ */

/* ---- Self-hosted fonts (latin subsets) ---- */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700; /* variable */
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --bg-0: #06080c;
  --bg-1: #0b1017;
  --bg-2: #111824;
  --bg-3: #18212f;
  --edge: #1f2c3d;
  --edge-bright: #2c3e55;

  --text-0: #e9f0f7;
  --text-1: #9db0c4;
  --text-2: #5f7188;

  --led: #3df58c;            /* phosphor green */
  --led-dim: #1d7a48;
  --cyan: #3cc8f0;
  --amber: #ffb74a;
  --red: #ff5e67;

  --led-glow: 0 0 8px rgba(61, 245, 140, .55), 0 0 24px rgba(61, 245, 140, .18);
  --cyan-glow: 0 0 8px rgba(60, 200, 240, .5), 0 0 22px rgba(60, 200, 240, .16);

  --font-display: 'Chakra Petch', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;

  --radius: 4px;       /* hard, technical corners */
  --radius-lg: 8px;
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(61, 245, 140, .25); }

/* Blueprint grid + vignette backdrop */
.backdrop-grid {
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(60, 200, 240, .05), transparent 60%),
    linear-gradient(rgba(44, 62, 85, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 62, 85, .16) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}

/* CRT scanline overlay — put on a fixed, pointer-less layer */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, .12) 0px,
    rgba(0, 0, 0, .12) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: .5;
}

/* ---- LED status dot ---- */
.led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: var(--led-glow);
  vertical-align: middle;
}
.led--cyan  { background: var(--cyan);  box-shadow: var(--cyan-glow); }
.led--amber { background: var(--amber); box-shadow: 0 0 8px rgba(255, 183, 74, .5); }
.led--red   { background: var(--red);   box-shadow: 0 0 8px rgba(255, 94, 103, .5); }
.led--off   { background: #233040;      box-shadow: none; }

@keyframes led-blink {
  0%, 70% { opacity: 1; }
  85%     { opacity: .25; }
  100%    { opacity: 1; }
}
.led--blink { animation: led-blink 1.6s steps(1) infinite; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--edge-bright);
  border-radius: var(--radius);
  background: var(--bg-3);
  color: var(--text-0);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.btn:hover { border-color: var(--cyan); box-shadow: var(--cyan-glow); }
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover { border-color: var(--edge-bright); }

.btn--primary {
  background: linear-gradient(180deg, #45ff97, #23c96c);
  border-color: #45ff97;
  color: #04130a;
  text-shadow: none;
}
.btn--primary:hover {
  border-color: #7dffb8;
  box-shadow: var(--led-glow);
}

.btn--ghost {
  background: transparent;
  border-color: var(--edge);
  color: var(--text-1);
}
.btn--danger:hover { border-color: var(--red); box-shadow: 0 0 8px rgba(255, 94, 103, .4); }

/* ---- Form fields ---- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-0);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-0);
  caret-color: var(--led);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), var(--cyan-glow);
}
.field input::placeholder { color: var(--text-2); }
.field .err {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
}
.field.has-err input { border-color: var(--red); }

.alert {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 94, 103, .4);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 94, 103, .07);
  font-family: var(--font-mono);
  font-size: 13px;
  color: #ffb9bd;
}

/* Utility */
.mono { font-family: var(--font-mono); }
.dim  { color: var(--text-1); }