/* AI OS Lattice — stylesheet companion.
   Adapted from AIEP's aiep-lattice.css to honor AI OS's theme convention
   (body.light-mode for light, default class-less for dark) instead of
   AIEP's html[data-theme] attribute. The canvas, panel helpers, and
   reduced-motion guard are otherwise identical so both surfaces render
   the exact same shader.
*/

/* ── Theme tokens. Light is the default for AI OS (per CLAUDE.md);
   dark kicks in only when body has the .light-mode-off marker OR
   when html[data-theme="dark"] is set. The CSS does not invert the
   shader directly — that's done in JS with theme presets that read
   the same selectors.
*/
:root{
  /* Light tokens are the default. The shader's light-mode preset
     (paper-white base, soft slate ink) lines up with these. */
  --aios-bg:            #f6f7f9;
  --aios-surface:       rgba(255,255,255,0.78);
  --aios-surface-strong:rgba(255,255,255,0.92);
  --aios-border:        rgba(10,14,22,0.10);
  --aios-border-strong: rgba(10,14,22,0.20);
  --aios-text:          #0a0e16;
  --aios-text-secondary:rgba(10,14,22,0.60);
  --aios-text-muted:    rgba(10,14,22,0.32);
  --aios-accent:        #20B2AA;       /* AI OS brand teal stays the accent */
  --aios-on-accent:     #ffffff;
  --aios-success:       #059669;
  --aios-error:         #dc2626;
  --aios-blur:          blur(22px) saturate(140%);
  --aios-radius:        12px;
  --aios-grid-line:     rgba(10,14,22,0.035);
}
body.light-mode-off,
html[data-theme="dark"]{
  --aios-bg:            #080808;
  --aios-surface:       rgba(15,15,15,0.72);
  --aios-surface-strong:rgba(15,15,15,0.88);
  --aios-border:        rgba(255,255,255,0.10);
  --aios-border-strong: rgba(255,255,255,0.18);
  --aios-text:          #ffffff;
  --aios-text-secondary:rgba(255,255,255,0.55);
  --aios-text-muted:    rgba(255,255,255,0.28);
  --aios-accent:        #20B2AA;
  --aios-on-accent:     #ffffff;
  --aios-success:       #10b981;
  --aios-error:         #ef4444;
  --aios-blur:          blur(28px) saturate(160%);
  --aios-grid-line:     rgba(255,255,255,0.022);
}

/* ── The canvas itself — full-bleed behind the page. ── */
.aios-lattice-host{
  position: relative;
  isolation: isolate;
  background: var(--aios-bg);
}
.aios-lattice-host > .aios-lattice{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* Full-viewport pages (login, lock) — fixed so the shader stays behind scroll. */
.aios-lattice-host.fixed > .aios-lattice{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* Anything the user actually interacts with sits inside this wrapper so it
   layers above the canvas. */
.aios-lattice-content{ position: relative; z-index: 1; }

/* Subtle DOM grid overlay (matches the existing AI OS texture). */
.aios-lattice-host::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--aios-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--aios-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
body.light-mode-off .aios-lattice-host::before,
html[data-theme="dark"] .aios-lattice-host::before{
  mix-blend-mode: screen;
}

/* Panel/card helpers that look right over the lattice in both themes. */
.aios-panel{
  background: var(--aios-surface);
  border: 1px solid var(--aios-border);
  backdrop-filter: var(--aios-blur);
  -webkit-backdrop-filter: var(--aios-blur);
}
.aios-card{
  background: var(--aios-surface-strong);
  border: 1px solid var(--aios-border);
  border-radius: 22px;
  backdrop-filter: var(--aios-blur);
  -webkit-backdrop-filter: var(--aios-blur);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 24px 60px rgba(10,14,22,0.10);
}
body.light-mode-off .aios-card,
html[data-theme="dark"] .aios-card{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 24px 80px rgba(0,0,0,0.45);
}

/* Reduced motion — shader already self-limits, but dim any decorative pulses. */
@media (prefers-reduced-motion: reduce){
  .aios-lattice-host [class*="-pulse"],
  .aios-lattice-host [class*="-ring"]{
    animation: none !important;
  }
}