/* =====================================================================
   ENCODEX — MONOLITH v7 · CURRENT (platform design system, 2026-10-17)
   ---------------------------------------------------------------------
   Source of truth: the platform kit (`design_system` MCP / platform
   /brand). Loaded FIRST on every page, before site/page CSS, so page
   sheets build on these tokens instead of redefining colours.

   Four roles, one rule each:
     white = ink     primary actions, headings, key numbers, the wordmark
     blue  = energy  focus, selection, current page, live data, links,
                     the light that runs through the logo
     Omnia = mascot  one per screen (contact page only on this site)
     circuit = shape 45° bends, pads, hairlines
   Colour budget per screen ≈ 87% neutral / 8% ink / 3–4% energy.
   ===================================================================== */

:root {
  color-scheme: dark;

  /* neutrals — one step toward blue-black */
  --void: #03060c; --black: #05080f; --graphite: #070b13; --smoke: #0b111b;
  --charcoal: #0f1622; --glass-hi: #131b28;
  --line: #162030; --line-2: #223044; --steel: #2e3d53;
  --line-input: #56647a;                     /* control borders ≥3:1 */
  --txt: #eef3f8; --txt-2: #9ca9b9; --txt-mute: #8592a4;
  --txt-ghost: #4e5b6e;                      /* placeholder / disabled / separators only */
  --glass-3: rgba(4, 8, 15, 0.8);

  /* energy — Omnia blue as a ramp + its one gradient partner */
  --energy-900: #051a2b; --energy-700: #0a4c78; --energy-500: #16b4ff;
  --energy-300: #7ed6ff; --energy-100: #e6faff;
  --indigo: #5a78ff; --energy: var(--energy-500); --energy-ink: #02121d;
  --energy-g: rgba(22, 180, 255, 0.09); --energy-g2: rgba(22, 180, 255, 0.16);
  --energy-line: rgba(22, 180, 255, 0.45);
  --grad-energy: linear-gradient(90deg, var(--energy-500), var(--indigo));

  /* glow — one knob, three steps, blue only, never on text */
  --gk: 0.65;
  --glow-1: 0 0 6px rgb(22 180 255 / calc(0.55 * var(--gk)));
  --glow-2: 0 0 2px rgb(22 180 255 / calc(0.6 * var(--gk))), 0 0 14px rgb(22 180 255 / calc(0.38 * var(--gk)));
  --glow-3: 0 0 10px rgb(22 180 255 / calc(0.35 * var(--gk))), 0 0 40px rgb(22 180 255 / calc(0.26 * var(--gk)));

  /* status — muted, functional */
  --ok: #57a46f; --warn: #c2953f; --crit: #c05a52; --crit-text: #e07a72;

  /* type — three fonts, one job each */
  --f-disp: 'Michroma', 'Hanken Grotesk', sans-serif;
  --f-ui: 'Hanken Grotesk', system-ui, sans-serif;
  --f-mono: 'Kode Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ls-caps: 0.12em;

  /* geometry — the 12px cut is for surfaces; controls stay sharp */
  --cut: 12px;

  /* motion */
  --t-1: 120ms; --t-2: 200ms; --t-3: 400ms; --t-4: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- v6 names, kept as aliases so page sheets keep working --------
     --txt-3 / --txt-4 were 3.7:1 and 1.8:1 on the page; v7 floors every
     readable text at 4.5:1, so both resolve to --txt-mute (6.4:1). Page
     sheets use --txt-ghost explicitly where the old value was a hairline,
     fill or separator rather than text. */
  --bg: var(--void);
  --bg-2: var(--charcoal);
  --txt-3: var(--txt-mute);
  --txt-4: var(--txt-mute);
  --hi: var(--txt);
  --f-text: var(--f-ui);
}

/* one focus ring everywhere */
:focus-visible { outline: 1px solid var(--energy); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* selection is an energy role */
::selection { background: var(--energy-g2); color: var(--txt); }

/* =====================================================================
   LOGO — "Circuit Routing" motion system (kit §2a, verbatim behaviour)
   States: route (draw → fill) · current (idle pulse ~7s) · reroute
   (loading) · power-down; [data-surge] adds the hover comet.
   ===================================================================== */
.enx-logo{overflow:visible;height:auto;display:block;--ink:var(--txt);--cur:#fff;--cur-gl:rgba(255,255,255,.5);--hot:#fff;--hot-gl:rgba(255,255,255,.55)}
.enx-logo.energized{--cur:var(--energy-300);--cur-gl:rgb(22 180 255 / .95);--hot:var(--energy-100);--hot-gl:rgb(22 180 255 / .8)}
.enx-logo .enx-fill path{fill:var(--ink)}
.enx-logo .enx-wire path{fill:none;stroke:var(--cur);stroke-width:.8;opacity:0}
.enx-logo .enx-spark path{fill:none;opacity:0}
.enx-logo[data-surge]{cursor:pointer}
.enx-logo[data-state="route"] .enx-fill path{fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.28));animation:enx-route-draw .85s cubic-bezier(.7,0,.3,1) forwards,enx-route-fill .45s ease forwards;animation-delay:calc(var(--i)*.14s),calc(.85s + var(--i)*.14s)}
.enx-logo.energized[data-state="route"] .enx-fill path{stroke:var(--cur);stroke-width:.7;filter:drop-shadow(0 0 2.5px var(--cur-gl))}
@keyframes enx-route-draw{to{stroke-dashoffset:0}}
@keyframes enx-route-fill{to{fill-opacity:1;stroke-opacity:0;filter:drop-shadow(0 0 0 transparent)}}
.enx-logo[data-state="current"] .enx-wire path{stroke-width:.85;stroke-dasharray:.14 .86;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--cur-gl));animation:enx-current 7s linear infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes enx-current{0%{stroke-dashoffset:1;opacity:0}3%{opacity:.95}22%{stroke-dashoffset:0;opacity:.95}28%,100%{opacity:0}}
.enx-logo[data-state="reroute"] .enx-fill path{fill:var(--txt-ghost)}
.enx-logo[data-state="reroute"] .enx-wire path{opacity:1;stroke-width:.95;stroke-dasharray:.12 .88;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--cur-gl));animation:enx-reroute 1.7s linear infinite;animation-delay:calc(var(--i)*.06s)}
@keyframes enx-reroute{to{stroke-dashoffset:0}}
.enx-logo[data-state="power-down"] .enx-fill path{animation:enx-down-fill .5s ease forwards}
.enx-logo[data-state="power-down"] .enx-wire path{stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 2px var(--cur-gl));animation:enx-down-wire 1s ease forwards;animation-delay:calc((4 - var(--i))*.05s)}
@keyframes enx-down-fill{0%{fill-opacity:1}42%,100%{fill-opacity:0}}
@keyframes enx-down-wire{0%{opacity:0;stroke-dashoffset:0}16%{opacity:1;stroke-dashoffset:0}100%{opacity:1;stroke-dashoffset:1}}
.enx-logo[data-surge] .enx-spark path{stroke:var(--hot);stroke-width:1.3;stroke-dasharray:.08 .92;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--hot-gl))}
.enx-logo.energized[data-surge] .enx-spark path{filter:drop-shadow(0 0 2px var(--hot-gl)) drop-shadow(0 0 6px var(--cur-gl))}
a:hover > .enx-logo[data-surge] .enx-spark path,.enx-logo[data-surge]:hover .enx-spark path{animation:enx-surge-race .52s cubic-bezier(.4,0,.2,1);animation-delay:calc(var(--i)*.06s)}
a:hover > .enx-logo[data-surge] .enx-wire path,.enx-logo[data-surge]:hover .enx-wire path{animation:enx-surge-ignite .7s ease .4s}
a:hover > .enx-logo[data-surge] .enx-fill path,.enx-logo[data-surge]:hover .enx-fill path{animation:enx-surge-heat .85s ease .38s}
@keyframes enx-surge-race{0%{opacity:0;stroke-dashoffset:1}12%,86%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes enx-surge-ignite{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
@keyframes enx-surge-heat{0%,100%{fill:var(--ink);filter:none}42%{fill:var(--hot);filter:drop-shadow(0 0 8px var(--hot-gl))}}
@media (prefers-reduced-motion: reduce){
  .enx-logo .enx-fill path{animation:none!important;fill:var(--ink)!important;fill-opacity:1!important;stroke-opacity:0!important;filter:none!important}
  .enx-logo .enx-wire path,.enx-logo .enx-spark path{animation:none!important;opacity:0!important}
  .enx-logo[data-state="reroute"] .enx-fill path{fill:var(--ink)!important}
}

/* =====================================================================
   ENERGY PRIMITIVES — shared by the chrome on every page
   ===================================================================== */

/* live pip: the one looping signal the chrome is allowed */
.enx-live {
  display: inline-block; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--energy); box-shadow: var(--glow-1);
  animation: enx-pip 3.6s ease-in-out infinite;
}
@keyframes enx-pip { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .enx-live { animation: none; } }