/* =====================================================================
   SOLITON SHARED BRAND LAYER — link this on every Soliton page so they're
   self-similar from one source. Pair with soliton-hex-tile.css (defines the
   --hex-lattice/--hex-nodes vars, forward tier #22AEFF, light+dark variants).

     <link rel="stylesheet" href="/soliton-hex-tile.css">
     <link rel="stylesheet" href="/soliton-brand.css">
     <body data-theme="dark"> (or "light")
       <div id="mx-hexbg" aria-hidden="true"></div>
       <div class="sol-glow"></div>
       <div class="sol-brand"><span class="sol-hex"></span><img class="sol-wm" alt="Soliton" src="/soliton-wm.png"></div>
       ...content (give it position:relative; z-index:1)...
       <div class="sol-foot"><span class="sol-hex"></span> Powered by Soliton</div>

   Page-specific inline <style> may follow these links to override layout, but
   the tokens here are the canonical Soliton palette + fonts.
   ===================================================================== */

:root{
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --accent-2:#22AEFF; --accent-rgb:34,174,255;
}
[data-theme="light"]{ --bg:#EEF3F9; --bg-2:#E3EBF4; --panel:#FFFFFF; --ink:#0E1320; --muted:#5C6B7D; --border:rgba(14,19,32,.12); --accent:#1683C7; --on-accent:#fff; --glow:rgba(22,131,199,.10); }
[data-theme="dark"]{ --bg:#04101f; --bg-2:#0B1A2C; --panel:#0E1F33; --ink:#E6EBF2; --muted:#8A97A6; --border:rgba(255,255,255,.12); --accent:#22AEFF; --on-accent:#04121E; --glow:rgba(34,174,255,.16); }

/* The hex-tile texture (uses --hex-* from soliton-hex-tile.css). */
#mx-hexbg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--hex-bg-opacity,.5);
  background-image:var(--hex-nodes), var(--hex-lattice); background-size:var(--hex-nodes-size), var(--hex-lattice-size); }

/* The hexagon-clipped focal glow, breathing. */
.sol-glow{ position:fixed; top:-240px; left:50%; width:640px; height:720px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, var(--glow), transparent 60%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); filter:blur(50px);
  animation:sol-orbpulse 4.5s ease-in-out infinite; }
@keyframes sol-orbpulse{ 0%,100%{ opacity:.75; transform:translateX(-50%) scale(.97); } 50%{ opacity:1; transform:translateX(-50%) scale(1.05); } }

/* The pulsing hexagon glyph + the Soliton word logo. */
.sol-brand{ display:flex; align-items:center; justify-content:center; gap:9px; position:relative; z-index:1; }
.sol-hex{ width:10px; height:11px; flex:none; background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:sol-hexpulse 2.4s ease-in-out infinite; }
@keyframes sol-hexpulse{
  0%,100%{ filter:drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 3px var(--accent)); transform:scale(.92); opacity:.85; }
  50%{ filter:drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px var(--accent)); transform:scale(1.15); opacity:1; }
}
.sol-wm{ height:9px; width:auto; display:block; }
[data-theme="light"] .sol-wm{ filter:brightness(0) opacity(.82); }

.sol-foot{ margin-top:16px; text-align:center; position:relative; z-index:1;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:7px; }
.sol-foot .sol-hex{ width:7px; height:8px; }
