/* LIRIL Theme — Clear Glass + Procedural Palette
   Modified: 2026-04-24 | Cap#131 | Daniel directive: monochrome theme with
   coloured elements. Default palette flipped from LIRIL-blue (hue 210, sat
   68%) to neutral monochrome (sat 4%); semantic accent colors retained via
   the monochrome slate imported below. The procedural slider still works —
   users who pick a colored hue from the chip palette get the old behavior.
   Reads --liril-phase (0..1) set by js/liril-theme-slider.js and interpolates:
     phase=0.0  → dark obsidian/carbon
     phase=0.5  → twilight cobalt (midtone)
     phase=1.0  → bright paper (light)
   Plus per-hue axis via --liril-hue (0..360) for the accent color.
   All colors derive from these two variables — changing the slider
   updates the ENTIRE site live. */

/* Cap#131 (2026-04-24): Import the monochrome slate FIRST so its token
   overrides (--bg, --text-*, --accent, semantic palette) apply on every
   page that loads liril-theme.css (312 pages). The slate's :root block
   wins over style.css because liril-theme.css cascades last. */
@import url("/css/slates/monochrome.css?v=2");

/* Cap#208 (2026-04-24): TENET5 operational slate chain — converts the monochrome
   base to the TENET5 (tenet5-motion / TENET5 baseline) operational-
   intelligence aesthetic. Token deltas land on top of monochrome; opt-in
   .s5-* component classes (s5-display, s5-eyebrow, s5-slash,
   s5-status-list, s5-binary-marquee, s5-cluster) become available
   site-wide. Comment this single line to revert. */
@import url("/css/slates/ops.css?v=2");
/* Cap#217 (2026-04-24): TENET5 motion vocabulary — scroll-reveal,
   stagger, scramble, ambient canvas, cursor ring, pip rail, slow
   marquee. Driven by /js/motion.js. Both load on every page
   that links liril-theme.css. */
@import url("/css/slates/motion.css?v=2");

:root {
  /* Procedural axes — set by the slider JS, persisted in localStorage */
  --liril-phase: 0.08;       /* 0=dark .. 1=light; default 0.08 = near-dark */
  --liril-hue:   220;        /* hue is largely cosmetic when saturation is low */
  --liril-saturation: 4%;    /* monochrome by default; slider can raise it */
  --liril-warmth: 0.0;       /* 0 cool .. 1 warm (shifts hue slightly) */

  /* Derived lightness curves (per-role) */
  --liril-bg-l:        calc(8% + (var(--liril-phase) * 87%));       /* 8..95 */
  --liril-panel-l:     calc(12% + (var(--liril-phase) * 80%));      /* 12..92 */
  --liril-text-l:      calc(92% - (var(--liril-phase) * 80%));      /* 92..12 */
  --liril-dim-l:       calc(68% - (var(--liril-phase) * 40%));      /* 68..28 */
  --liril-border-l:    calc(22% + (var(--liril-phase) * 60%));      /* 22..82 */
  --liril-accent-l:    calc(50% + (var(--liril-phase) * 8%));       /* 50..58 */

  /* Fixed Glass/Solid alpha values (rigid, no transparency) */
  --liril-glass-a:     1.0; 
  --liril-glass-border-a: 1.0; 

  /* Final color roles overrides (locked to TENET5 aesthetic) */
  --liril-bg:           #161616;
  --liril-bg-2:         #1a1a1a;
  --liril-panel:        #202020;
  --liril-panel-solid:  #202020;
  --liril-text:         #ffffff;
  --liril-dim:          #b9b9b9;
  --liril-border:       #333333;
  --liril-border-solid: #333333;
  --liril-accent:       #ffffff;
  --liril-accent-dim:   #b9b9b9;

  /* Remove blurs entirely */
  --liril-blur:         none;
  --liril-blur-strong:  none;

  /* Remove shadows */
  --liril-shadow:       none;
}

/* Base body + scrollbar */
body, html.topo body, body.topo {
  background: var(--liril-bg);
  color: var(--liril-text);
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              color      0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--liril-bg-2); }
body::-webkit-scrollbar-thumb { background: var(--liril-border-solid);
                                 border-radius: 5px; }

/* Solid rigid panels — TENET5 baseline */
.liril-glass {
  background: var(--liril-panel);
  border: 1px solid var(--liril-border);
  border-radius: 2px;
  box-shadow: none;
  transition: background 0.4s, border-color 0.4s;
}
.liril-glass-strong {
  background: var(--liril-panel);
  border: 1px solid var(--liril-border);
  border-radius: 2px;
  box-shadow: none;
}

/* Accent elements */
a, .liril-accent-fg { color: var(--liril-accent); }
a:hover { color: var(--liril-accent-dim); }
.liril-accent-bg { background: var(--liril-accent); color: var(--liril-bg); }
.liril-accent-border { border-color: var(--liril-accent); }

/* The procedural theme slider is hidden entirely to enforce the baseline */
.liril-theme-slider-shell {
  display: none !important;
}
.liril-slider-edge-trigger {
  display: none !important;
}

/* ── MOUNTED VARIANT (in a banner slot, not floating) ────────── */
/* When a page provides <div class="liril-theme-slider-mount"></div>,
   the slider is appended inline into that slot instead of floating
   at the top. No hide/reveal; no edge trigger; no z-index. Inherits
   color tokens from the parent banner. */
.liril-theme-slider-mount {
  display: inline-flex; align-items: center;
}
.liril-theme-slider-shell.liril-slider-mounted {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--liril-dim);
}
.liril-theme-slider-shell.liril-slider-mounted label {
  color: var(--liril-dim); font-size: 10px;
  letter-spacing: 0.14em;
}
.liril-theme-slider-shell.liril-slider-mounted input[type=range] {
  width: 120px;
}
.liril-theme-slider-shell.liril-slider-mounted .liril-slider-readout {
  font-size: 10px; min-width: 58px;
}
.liril-theme-slider-shell.liril-slider-mounted .liril-hue-chip {
  width: 14px; height: 14px;
}

/* Mobile: hide mounted readout to save space */
@media (max-width: 768px) {
  .liril-theme-slider-shell.liril-slider-mounted input[type=range] {
    width: 80px;
  }
  .liril-theme-slider-shell.liril-slider-mounted .liril-slider-readout {
    display: none;
  }
  .liril-theme-slider-shell.liril-slider-mounted label {
    display: none;
  }
}

/* Hero blocks (TENET5 solid flat pattern) */
.hero-section, .accountability-hero {
  background: var(--liril-panel-solid) !important;
  color: var(--liril-text) !important;
  border-bottom: 1px solid var(--liril-border) !important;
}
.hero-hook { color: var(--liril-text) !important; }
.cta-button {
  background: var(--liril-accent) !important;
  color: var(--liril-bg) !important;
  backdrop-filter: blur(6px);
}
.cta-button:hover {
  background: var(--liril-accent-dim) !important;
}

/* Focus-ring: accessibility-first (AAA contrast via HSL swap) */
:focus-visible {
  outline: 2px solid var(--liril-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  body, * { transition: none !important; animation: none !important; }
}