/* ═══════════════════════════════════════════════════════════════
   ORION — Shared CSS Foundation · Phase 1
   Loaded by: /guard/, /command/, /dashboard/, /alerts/
   Load order contract: this file loads FIRST on every migrated
   page, before any page-specific <style> block or page CSS file
   (guard.css). Page-specific styles are expected to override
   these defaults; nothing in this file may require higher
   specificity than the page styles that come after it.

   Phase 1 scope (intentionally small):
     · canonical ORION design tokens (:root)
     · severity palette tokens
     · fail-safe html/body base (zero-specificity :where)
     · atmosphere layers (.fx*) + breathe/scan keyframes
     · glass panel primitive (.panel)
     · cinematic frame corners (.frame-corner / .c-*)
     · .eyebrow label primitive
   Everything else (layouts, grids, page hero styling, Guard's
   entire gm-* system) deliberately remains page-specific.

   Guard note: guard.css keeps its own :root variable names and
   values on purpose (documented in guard.css). Where names
   collide (--line, --teal, --violet, --text), guard.css loads
   after this file, so Guard's values win on the Guard page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Canonical ORION design tokens ─────────────────────── */
:root{
  --cyan:#22e9ff; --teal:#0bb8d8; --aqua:#27ffd4;
  --purple:#a855f7; --violet:#7c3aed; --magenta:#e34bff; --pink:#ff5ea0;
  --bg:#04070d;
  --ink:#0a1626;
  --glass:rgba(10,24,42,.55);
  --glass-2:rgba(8,20,38,.72);
  --line:rgba(40,210,255,.16);
  --line-2:rgba(40,210,255,.34);
  --line-soft:rgba(40,210,255,.07);
  --text:#cfeefb;
  --dim:rgba(150,196,224,.55);
  --dim-2:rgba(150,196,224,.34);
  --r:14px;
  /* severity palette (used natively by Alerts; available everywhere) */
  --sev-crit:#ff5ea0; --sev-warn:#ffb454; --sev-info:#22e9ff; --sev-ok:#27ffd4;
  /* ORION typography tokens (fonts themselves still load per-page) */
  --font-sans:'Rajdhani',system-ui,"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:'Orbitron','Rajdhani',system-ui,sans-serif;
}

/* ── Fail-safe base ────────────────────────────────────────
   Zero-specificity (:where) so every page's own html/body rules
   always win. This only guarantees no migrated page can ever
   render plain white/unstyled if a page style block is delayed. */
:where(html, body){
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

/* ── Atmosphere layers (live inside stage so they scale) ── */
.fx{position:absolute;inset:0;pointer-events:none}
.fx-glow{
  background:
    radial-gradient(ellipse 46% 52% at 50% 46%,rgba(124,58,237,.16),transparent 60%),
    radial-gradient(ellipse 34% 40% at 12% 70%,rgba(34,233,255,.12),transparent 62%),
    radial-gradient(ellipse 30% 36% at 88% 24%,rgba(227,75,255,.11),transparent 60%),
    radial-gradient(ellipse 26% 30% at 82% 84%,rgba(255,94,160,.07),transparent 60%);
  animation:breathe 16s ease-in-out infinite alternate;z-index:0}
.fx-grid{
  background:
    linear-gradient(rgba(40,210,255,.035) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(40,210,255,.035) 1px,transparent 1px) 0 0/34px 100%;
  mask:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 78%);
  -webkit-mask:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 78%);
  opacity:.5;z-index:0}
.fx-scan{
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(40,210,255,.018) 3px,rgba(40,210,255,.018) 4px);
  animation:scan 9s ease-in-out infinite;z-index:60}
.fx-vig{box-shadow:inset 0 0 120px 18px rgba(0,0,0,.85);z-index:55}
@keyframes breathe{0%{opacity:.62}100%{opacity:1}}
@keyframes scan{0%,100%{opacity:.6}50%{opacity:1}}

/* ── Glass panel base ──────────────────────────────────── */
.panel{position:relative;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);overflow:hidden}
.panel::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(40,210,255,.06),transparent 42%),
            linear-gradient(0deg,rgba(124,58,237,.05),transparent 30%)}
.panel::after{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(40,210,255,.5),transparent);opacity:.55}
.panel>*{position:relative;z-index:1}

/* Corner ticks for the cinematic frame */
.frame-corner{position:absolute;width:24px;height:24px;z-index:40;pointer-events:none;opacity:.8}
.frame-corner svg{width:100%;height:100%}
.c-tl{top:6px;left:6px}.c-tr{top:6px;right:6px;transform:scaleX(-1)}
.c-bl{bottom:6px;left:6px;transform:scaleY(-1)}.c-br{bottom:6px;right:6px;transform:scale(-1,-1)}

.eyebrow{font-family:'Orbitron',sans-serif;font-size:8.5px;font-weight:600;
  letter-spacing:.26em;color:var(--dim);text-transform:uppercase}