/* ============================================================================
   hud-system.css — H.U.D Manager master design system
   ----------------------------------------------------------------------------
   Single source of truth for the site-wide look, codified from the approved
   index.html landing page. Pages opt in by linking this file and adopting the
   tokens + component classes. It deliberately does NOT brute-force every
   element — data-wired pages keep their layout; this enforces the *system*
   (type, palette, panels, chrome, atmosphere), not the *composition*.

   Load order: link this BEFORE page-local <style> so pages can override
   specifics. Fonts: Orbitron (display) + JetBrains Mono (body/labels).
   ============================================================================ */

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

:root{
  /* ── core palette — cyan / amber / magenta on near-black. NO red, NO green. */
  --hud-bg:#06080d;
  --hud-bg2:#0a0f18;
  --hud-bg3:#070d16;
  --hud-ink:#cfeaff;          /* primary text */
  --hud-dim:#7d97b3;          /* secondary text */
  --hud-mute:#52708c;         /* tertiary / disabled */
  --hud-cy:#5ed7ff;           --hud-cy-b:#a8efff;  --hud-cy-d:#3aa8d0;
  --hud-am:#ffc14d;           --hud-am-b:#ffe5a0;
  --hud-mg:#ff5cc8;           --hud-mg-b:#ffa3e6;
  --hud-cy-glow:rgba(94,215,255,.55);
  --hud-am-glow:rgba(255,193,77,.50);
  --hud-line:rgba(94,215,255,.16);
  --hud-line-2:rgba(94,215,255,.34);
  --hud-panel:rgba(10,18,30,.62);
  --hud-panel-solid:#0a1018;

  /* ── type scale — legibility-first. Never go below --hud-fs-xs anywhere. */
  --hud-font:'JetBrains Mono',ui-monospace,'Roboto Mono',monospace;
  --hud-display:'Orbitron',sans-serif;
  --hud-fs-xs:12px;           /* hard minimum for labels */
  --hud-fs-sm:13px;
  --hud-fs-base:15px;
  --hud-fs-md:17px;
  --hud-fs-lg:22px;
  --hud-fs-hero:clamp(34px,6vw,80px);
  --hud-ls:.04em;             /* base letter-spacing */
  --hud-ls-wide:.18em;        /* labels / eyebrows */
}

/* ── base: type + color only. Pages keep their own layout/positioning. ───── */
.hud-base{
  font-family:var(--hud-font);
  font-size:var(--hud-fs-base);
  line-height:1.6;
  color:var(--hud-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hud-base h1,.hud-base h2,.hud-base h3,.hud-base .hud-display{
  font-family:var(--hud-display);
  font-weight:700;
  letter-spacing:.02em;
}

/* ── atmosphere — opt-in via <body class="hud-atmos">. Pure backdrop. ────── */
.hud-atmos{background:var(--hud-bg);}
.hud-atmos::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(94,215,255,.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,92,200,.07), transparent 50%),
    linear-gradient(rgba(94,215,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,215,255,.045) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,46px 46px,46px 46px;
}
.hud-atmos::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 3px 4px);
  mix-blend-mode:overlay;opacity:.5;
}
.hud-atmos > *{position:relative;z-index:2;}

/* ── HUD corner-bracket frame — <div class="hud-frame">…4 <i>…</div> ────── */
.hud-frame i{position:fixed;width:34px;height:34px;border:2px solid var(--hud-cy);
  opacity:.55;z-index:3;pointer-events:none}
.hud-frame .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.hud-frame .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.hud-frame .bl{bottom:14px;left:14px;border-right:0;border-top:0}
.hud-frame .br{bottom:14px;right:14px;border-left:0;border-top:0}

/* ── hero title chrome — the framed ⟦ TITLE ⟧ treatment ─────────────────── */
.hud-hero{text-align:center;padding:44px 0 30px;position:relative}
.hud-hero .hud-eyebrow{font-family:var(--hud-font);font-size:var(--hud-fs-xs);
  letter-spacing:.42em;color:var(--hud-am);margin-bottom:18px;text-transform:uppercase}
.hud-hero h1{font-family:var(--hud-display);font-weight:900;line-height:1;
  font-size:var(--hud-fs-hero);letter-spacing:.04em;color:#eafaff;
  text-shadow:0 0 30px var(--hud-cy-glow);margin:0}
.hud-hero h1 .brk{color:var(--hud-cy);font-weight:700;opacity:.85;margin:0 .18em}
.hud-hero .hud-lead{margin:18px auto 0;max-width:680px;color:var(--hud-dim);
  font-size:var(--hud-fs-sm);letter-spacing:var(--hud-ls)}

/* ── MFD panel — clip-cornered card ─────────────────────────────────────── */
.hud-panel,.hud-card{
  background:var(--hud-panel);
  border:1px solid var(--hud-line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  transition:border-color .2s, transform .2s, background .2s;
}
a.hud-card{display:block;text-decoration:none;color:inherit;padding:24px 22px}
a.hud-card:hover{border-color:var(--hud-cy);transform:translateY(-3px);
  background:rgba(14,26,42,.8)}
.hud-panel-hdr{font-family:var(--hud-display);font-weight:700;
  font-size:var(--hud-fs-xs);letter-spacing:var(--hud-ls-wide);
  color:var(--hud-am);text-transform:uppercase}

/* ── section header rule ────────────────────────────────────────────────── */
.hud-sec-h{display:flex;align-items:center;gap:16px;margin:0 0 24px}
.hud-sec-h h2{font-family:var(--hud-display);font-weight:700;
  font-size:var(--hud-fs-sm);letter-spacing:.3em;color:var(--hud-am);
  white-space:nowrap;text-transform:uppercase}
.hud-sec-h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--hud-am-glow),transparent)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.hud-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 30px;
  font-family:var(--hud-display);font-weight:700;font-size:var(--hud-fs-sm);
  letter-spacing:var(--hud-ls-wide);text-decoration:none;cursor:pointer;border:0;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:transform .18s, box-shadow .18s}
.hud-btn-primary{background:linear-gradient(135deg,var(--hud-cy),#3aa8d8);
  color:#04222e;box-shadow:0 0 0 1px var(--hud-cy),0 0 26px var(--hud-cy-glow)}
.hud-btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--hud-cy),0 0 40px var(--hud-cy-glow)}
.hud-btn-ghost{background:var(--hud-panel);color:var(--hud-cy);
  box-shadow:inset 0 0 0 1px var(--hud-line)}
.hud-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--hud-cy);color:#eafaff}

/* ── accents / utilities ────────────────────────────────────────────────── */
.hud-cy{color:var(--hud-cy)} .hud-am{color:var(--hud-am)} .hud-mg{color:var(--hud-mg)}
.hud-led{width:7px;height:7px;border-radius:50%;background:var(--hud-cy);
  box-shadow:0 0 9px var(--hud-cy-glow);display:inline-block;animation:hud-pulse 2.4s infinite}
@keyframes hud-pulse{50%{opacity:.35}}
@keyframes hud-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hud-rise{opacity:0;animation:hud-rise .7s forwards}

a:focus-visible,.hud-btn:focus-visible{outline:2px solid var(--hud-am);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hud-atmos *,.hud-rise,.hud-led{animation:none!important}
  .hud-rise{opacity:1!important;transform:none!important}
}
