/* ============================================================================
   theme.css — THE OMNI DESIGN SYSTEM (single source of truth)
   ----------------------------------------------------------------------------
   One canonical token layer every surface inherits: Bridge, Pulse, Memory/cube,
   portal, voice, studio. Load this LAST (after each page's component CSS) so
   its :root wins the cascade and unifies the palette without editing every file.

   Aesthetic: "Cybertronian Gauntlet" — an obsidian void lit by cobalt ENERGON,
   with the dispatch graph rendered as an ascending gold spectrum (396Hz root
   → 963Hz crown). Glass surfaces, energy edges, restrained motion. Heavy effects
   are gated by [data-fx] (set by fx.js) so the iPhone/Envy go cinematic while the
   E530's HD 4000 degrades gracefully — never janky.

   Mythos (stone/element/frequency) is a deliberate visual language over REAL
   system state, not a claim of physics.
   ========================================================================== */

:root {
  /* ---- void → surface (depth stack) ---- */
  --void:        #03040a;
  --bg:          #06070f;
  --bg-1:        #090b16;
  --surface:     #0d1020;
  --surface-2:   #131830;
  --surface-3:   #1a2142;
  --line:        #20284a;
  --line-2:      #2c3766;
  --hair:        color-mix(in srgb, var(--energon) 14%, transparent);

  /* ---- ENERGON — the primary energy. RECOLORED to the Infinity Gauntlet:
         85% GOLD primary (deep bronze → gold → white-hot), 15% ultraviolet accent. ---- */
  --energon:      #f5b73f;   /* Gauntlet gold (primary) */
  --energon-deep: #c98a16;   /* deep bronze-gold        */
  --energon-hot:  #fff2c0;   /* white-hot gold core     */
  --energon-soft: color-mix(in srgb, var(--energon) 22%, transparent);
  --energon-glow: color-mix(in srgb, var(--energon) 55%, transparent);

  /* ---- ink ---- */
  --ink:    #e9eefc;
  --ink-2:  #aebbdd;
  --mute:   #6f7da3;
  --faint:  #43506f;
  --txt:    var(--ink);   /* legacy alias (cube/studio) */

  /* ---- status ---- */
  --live:   #34e6a6;
  --green:  #34e6a6;
  --emerald:#34e6a6;
  --amber:  #f6b73e;
  --gold:   #f6c651;
  --brass:  #c9a227;     /* legacy alias (cube) */
  --red:    #ff5d6c;
  --warn:   #ff9f45;
  --cyan:   var(--energon);
  --cyan2:  var(--energon-deep);
  --violet: #a78bfa;
  --purple: #a78bfa;
  --uv:     #c08bff;

  /* ---- DOMAIN ACCENTS — recolored to the Gauntlet palette: 85% gold family,
     15% ultraviolet on the apex nodes. (The six Infinity Stones keep their own
     gem colors in omni-panels.js — gold gauntlet, colored stones.) ---- */
  --stone-amber: #e0a82e;  /* amber-gold  */
  --stone-gold:    #f5b73f;  /* gold        */
  --stone-bright:  #ffd76a;  /* bright gold */
  --stone-core:     #f6c651;  /* gold (core) */
  --stone-deep:      #d4a017;  /* deep gold   */
  --stone-uv:  #c08bff;  /* ultraviolet (accent) */
  --stone-uv-apex:    #a78bfa;  /* ultraviolet (apex)   */
  --stone-violet:    #b39ddb;  /* soft violet (accent) */
  --stone-dormant:  var(--faint);

  /* ---- THE SIX INFINITY STONES — canonical GEM colors (forge.html DNA = the
     single source of truth for the stone palette). DISTINCT from the gold-family
     --stone-* domain accents above: these are the six gem hues, and per the
     omni-design-system they keep their colors — never gold them. Each stone is a
     live subsystem entry point; Reality is the bridge to the Infinite Brain.
     NOTE: omni-panels.js currently hardcodes near-duplicates (#3aa0ff/#ff4d5e/…)
     — reconcile it to these tokens in the B2 panel restyle. ---- */
  --gem-space:   #3ea7ff;  /* Mesh · Federation         (Space Stone)   */
  --gem-mind:    #ffd23f;  /* Inference                 (Mind Stone)    */
  --gem-reality: #ff3b58;  /* All-Spark · Memory/vault  (Reality Stone) → opens the Infinite Brain */
  --gem-power:   #a855ff;  /* Governance · tools/OS     (Power Stone)   */
  --gem-time:    #39e08a;  /* Media · scheduler/sync    (Time Stone)    */
  --gem-soul:    #ff7a2f;  /* Voice · personas          (Soul Stone)    */

  /* ---- glass + energy materials ---- */
  --glass-bg:    color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-bg-2:  color-mix(in srgb, var(--surface-2) 64%, transparent);
  --glass-blur:  14px;
  --glass-edge:  color-mix(in srgb, var(--energon) 26%, var(--line-2));
  --glass-spec:  linear-gradient(180deg, color-mix(in srgb,#fff 8%, transparent), transparent 40%);
  --accent:      var(--energon);   /* per-panel override sets this */
  --accent-glow: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);

  /* ---- elevation / glow (gated below by --fx) ---- */
  --fx-glow: 1;   /* multiplier; fx.js→lite sets shadows/blur down via [data-fx=lite] */
  --shadow-1: 0 2px 10px rgba(0,0,0,.45);
  --shadow-2: 0 10px 40px rgba(0,0,0,.55);
  --edge-glow: 0 0 0 1px var(--glass-edge), 0 0 22px -6px var(--accent-glow);
  --core-glow: 0 0 30px -4px var(--accent-glow), inset 0 0 22px -14px var(--accent);

  /* ---- backgrounds (cobalt nebula mesh; pure CSS, cheap) ---- */
  --nebula:
    radial-gradient(60% 50% at 12% 0%, color-mix(in srgb,var(--energon-deep) 16%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 8%, color-mix(in srgb,var(--stone-uv-apex) 12%, transparent), transparent 72%),
    radial-gradient(70% 60% at 50% 120%, color-mix(in srgb,var(--energon) 9%, transparent), transparent 70%),
    var(--void);

  /* ---- type ---- */
  /* Display: distinctive technical faces native per-platform (no CDN, no vendored binary) —
     Bahnschrift ships on Windows (the host), DIN Alternate on iOS/macOS, Eurostile elsewhere. */
  --font-display: "Bahnschrift","DIN Alternate","Eurostile",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  /* UI/body — a clean native sans for readable chrome (no CDN, no vendored binary). The
     distinctive identity lives in --font-display (titles/brand) + --font-mono (data); body
     prose uses this so the deck stops reading as an all-monospace 2000s terminal. */
  --font-ui: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace;
  --mono: var(--font-mono);   /* legacy alias */
  --tracking-tight: -.012em;  /* display/headings — optical tightening at larger sizes */
  --tracking: .04em;
  --tracking-wide: .16em;

  /* ---- spacing / radius ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
  --r-1: 6px;   --r-2: 10px;  --r-3: 14px;   --r-4: 20px;   --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.4,.14,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .14s;  --dur-2: .28s;  --dur-3: .5s;  --dur-slow: 1.2s;
}

/* ---- adaptive fidelity: fx.js sets data-fx on <html> ----
   full  → cinematic (blur, glow, ambient motion)
   lite  → flatten heavy effects so the HD 4000 / weak GPUs stay smooth */
:root[data-fx="lite"] {
  --glass-blur: 0px;
  --fx-glow: 0;
  --edge-glow: 0 0 0 1px var(--glass-edge);
  --core-glow: inset 0 0 0 1px var(--accent-soft);
  --shadow-2: 0 6px 18px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1:0s; --dur-2:0s; --dur-3:0s; --dur-slow:0s; }
}

/* ============================================================================
   Primitive utilities — opt-in classes any surface can use. Pure-additive; they
   don't alter existing component rules, they give new markup a premium baseline.
   ========================================================================== */

.omni-bg {                       /* page backdrop: cobalt nebula over the void */
  background: var(--nebula);
  background-attachment: fixed;
}

.glass {                          /* the canonical surface */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  position: relative;
}
.glass::before {                  /* top spec highlight — the "energy" sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glass-spec); pointer-events: none; opacity: .8;
}

.energy-edge {                    /* accent-driven glow ring (cinematic; flat on lite) */
  box-shadow: var(--edge-glow);
}

.energon-text {
  color: var(--energon-hot);
  text-shadow: 0 0 18px var(--energon-glow);
}

/* a single ambient pulse keyframe surfaces reuse for "live energy" (gated by motion) */
@keyframes omni-pulse {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}
.pulse-live { animation: omni-pulse var(--dur-slow) var(--ease) infinite; }
:root[data-fx="lite"] .pulse-live { animation: none; opacity: .85; }

/* ---- the six stones — set the stone accent by class instead of hardcoding a
   hex (e.g. <span class="gem stone-reality">). Pure-additive: no current markup
   uses these, so rendering is unchanged until a surface opts in. ---- */
.stone-space   { --c: var(--gem-space);   }
.stone-mind    { --c: var(--gem-mind);    }
.stone-reality { --c: var(--gem-reality); }
.stone-power   { --c: var(--gem-power);   }
.stone-time    { --c: var(--gem-time);    }
.stone-soul    { --c: var(--gem-soul);    }

.gem {                            /* the forge.html stone orb (set --c via .stone-*) */
  width: var(--gem-size, 18px); height: var(--gem-size, 18px);
  border-radius: 50%; position: relative; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c, var(--energon)) 60%, #000 130%);
  box-shadow: 0 0 18px var(--c, var(--energon)), 0 0 38px var(--c, var(--energon));
}
:root[data-fx="lite"] .gem { box-shadow: 0 0 0 1px var(--c, var(--energon)); }

.bloom {                          /* emissive glow on hot elements (cinematic; flat on lite) */
  box-shadow: 0 0 22px -2px var(--accent-glow), 0 0 60px -10px var(--accent-glow);
}
:root[data-fx="lite"] .bloom { box-shadow: none; }

.gradient-heading {               /* white → gold background-clip heading (forge.html .title) */
  background: linear-gradient(180deg, #fff 0%, #d9e2ff 40%, var(--energon) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================================
   Shared form primitives — one consistent input/button baseline any panel can
   opt into via class (purely additive: existing component rules are untouched,
   and no current markup uses these yet, so rendering is unchanged). Consumes
   tokens only. APPLYING them to existing markup is a screenshot-driven Pass-2
   step; they live here now so the native-app wrap (SP2) inherits one control
   language. --fs-* are cockpit-local, so literal fallbacks keep these valid on
   portal/cube/orchestration (which don't load cockpit.css).
   ========================================================================== */
.omni-input {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font: inherit;
  font-size: var(--fs-body, 13px);
  padding: var(--sp-2) var(--sp-3);
  outline: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.omni-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.omni-input::placeholder { color: var(--mute); }

.omni-btn {
  font-family: var(--font-display);
  font-size: var(--fs-sub, 10px);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.omni-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--edge-glow); }
.omni-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================================
   Keyboard focus ring — accessibility baseline. :focus-visible is keyboard-only,
   so pointer users keep the existing quiet focus styles; keyboard users get a
   clear, token-colored ring. Spec-correct and additive.
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible,
.omni-input:focus-visible, .omni-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 2px;
}