/* =========================================================================
   AEGIS HUD — color and type tokens
   Cinematic sci-fi overlay system. Cyan + electric blue, soft-white glow.
   ========================================================================= */

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

:root {
  /* ---- Base color scale -------------------------------------------------- */
  --void:        #01030a;   /* deepest space */
  --bg-deep:     #050b18;   /* main page background */
  --bg-panel:    rgba(8, 22, 42, 0.42);   /* holo panel fill */
  --bg-panel-2:  rgba(12, 36, 68, 0.28);  /* secondary panel */
  --grid:        rgba(54, 178, 233, 0.08);

  /* Cyan — primary accent ------------------------------------------------- */
  --cyan-50:     #f0fcff;
  --cyan-100:    #d5f6ff;
  --cyan-200:    #a8ecff;
  --cyan-300:    #7be3ff;
  --cyan-400:    #44d4ff;
  --cyan-500:    #1fc7ff;  /* core HUD line / dot */
  --cyan-600:    #0aa6e0;
  --cyan-700:    #0876a8;
  --cyan-800:    #064d6f;
  --cyan-900:    #032838;

  /* Electric blue — secondary --------------------------------------------- */
  --blue-300:    #6aa8ff;
  --blue-500:    #2b7bff;
  --blue-700:    #0e3fa3;
  --blue-900:    #061a4d;

  /* Soft white glow ------------------------------------------------------- */
  --glow-soft:   rgba(180, 234, 255, 0.55);
  --glow-strong: rgba(126, 220, 255, 0.85);
  --glow-cyan:   0 0 12px rgba(31, 199, 255, 0.55), 0 0 32px rgba(31, 199, 255, 0.25);
  --glow-text:   0 0 6px rgba(126, 220, 255, 0.75);

  /* Semantic state (used sparingly) --------------------------------------- */
  --signal-ok:     #5cffb3;
  --signal-watch:  #ffd166;
  --signal-alert:  #ff5577;

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Rajdhani', 'Inter', sans-serif;       /* HUD labels / panel titles */
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;  /* data, telemetry, code */

  /* Sizes (HUD scale: small, technical) */
  --t-xxs:  9px;
  --t-xs:   10px;
  --t-sm:   11px;
  --t-md:   13px;
  --t-lg:   16px;
  --t-xl:   22px;
  --t-2xl:  32px;

  --tracking-wide:   0.18em;
  --tracking-x:      0.32em;
  --tracking-data:   0.05em;

  /* Spacing / radii / lines ---------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;
  --hairline: 1px solid rgba(125, 217, 255, 0.35);
  --hairline-soft: 1px solid rgba(125, 217, 255, 0.18);

  /* Motion --------------------------------------------------------------- */
  --ease-hud: cubic-bezier(.22, .61, .36, 1);
  --pulse-slow: 4.2s;
  --pulse-med:  2.4s;
  --pulse-fast: 1.1s;
}

/* ---- Semantic text roles -------------------------------------------------
   Use these as classes on real elements (`.label`, `.data`, etc.) so the
   tokens stay in one place.
   ------------------------------------------------------------------------ */

.label-xs,
.label-sm,
.label-md {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--cyan-200);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-shadow: var(--glow-text);
}
.label-xs { font-size: var(--t-xxs); letter-spacing: var(--tracking-x); }
.label-sm { font-size: var(--t-xs); }
.label-md { font-size: var(--t-sm); }

.title-hud {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: var(--tracking-x);
  text-transform: uppercase;
  color: var(--cyan-100);
  text-shadow: var(--glow-text);
}

.data,
.data-lg {
  font-family: var(--font-mono);
  color: var(--cyan-100);
  letter-spacing: var(--tracking-data);
  text-shadow: var(--glow-text);
}
.data    { font-size: var(--t-sm); }
.data-lg { font-size: var(--t-lg); font-weight: 500; }

.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: 0.02em;
  color: var(--cyan-50);
  text-shadow: 0 0 10px rgba(126, 220, 255, 0.9), 0 0 24px rgba(31, 199, 255, 0.5);
}

.dim   { color: var(--cyan-300); opacity: 0.7; }
.dimer { color: var(--cyan-400); opacity: 0.45; }
.ok    { color: var(--signal-ok); }
.watch { color: var(--signal-watch); }
.alert { color: var(--signal-alert); }