/* Living Assets — WordPress embed styles.
   The design tokens double as the theming API: override any --la-* variable in
   your theme (Appearance → Additional CSS) and every module recolors live. */

/* :where() keeps these defaults at zero specificity, so any theme's own
   --la-* declarations win regardless of stylesheet load order. */
:where(:root) {
  --la-bg: #0a0b0c;
  --la-fg: #f4f5f4;
  --la-muted: #8a9088;
  --la-faint: #22262a;
  --la-accent: #c6ff4d;
  --la-accent2: #5f7a52;
}

:where([data-theme="light"], .is-light-theme) {
  --la-bg: #f6f7f5;
  --la-fg: #111412;
  --la-muted: #5c635c;
  --la-faint: #dde1dc;
  --la-accent: #79a20b;
  --la-accent2: #a8bd8a;
}

.la-embed {
  position: relative;
  overflow: hidden;
  background: var(--la-bg);
  /* direction-neutral: canvases have no text flow, safe in RTL themes */
  direction: ltr;
}
.la-embed > canvas { display: block; width: 100%; height: 100%; }

/* Background mode: fills the parent container and paints BEHIND its content.
   z-index:-1 inside the parent's own stacking context (isolation:isolate on
   the parent, set by mount.js) keeps the layer above the parent background
   but below every child — no changes needed on the content itself. */
.la-embed--bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none; /* clicks pass through; pointer physics listen on the parent */
}
.la-has-living-bg { position: relative; isolation: isolate; }

.la-story {
  position: relative;
  background: var(--la-bg);
  color: var(--la-fg);
}
.la-story h2 { color: var(--la-fg); }