/* ====================================================================
   LIQUID-APP — App-side adaptation layer for "Liquid Mid · Onest"
   --------------------------------------------------------------------
   The marketing kit (kit-base.css + liquid-base.css + liquid-mid-onest.css)
   was authored for a body that carries the `.kit-page` class, which is
   where it defines the bulk of its --k-* tokens AND paints a full-page
   background. In the app we deliberately do NOT use `.kit-page` (it would
   repaint --bg-primary and sit behind the sidebar). Instead the body
   carries `liq kit-liq-mid-onest`.

   This file therefore does three jobs:
     1. Re-home the --k-* tokens that only lived in `.kit-page` onto `.liq`
        (accent wiring, ink/bg/surface/status/pad/font) — dark + light.
     2. Stack page content above the fixed `.liq::before` atmosphere blob
        and keep the body font on Onest without clobbering `.emoji`.
     3. Align the app's own theme tokens (--card-bg / --border) to the kit
        glass values under `.content`, so not-yet-converted scoped Vue
        components read as glass for free. (This is token alignment, NOT a
        legacy-class !important bridge — that was intentionally skipped.)

   Load order: AFTER kit-base/liquid-base/liquid-mid-onest, BEFORE the
   base.html inline <style> (so the inline `.emoji` rule stays authoritative).
   ==================================================================== */

/* ---- 1. Re-home the kit tokens that `.kit-page` used to provide ----
   liquid-base.css's `.liq` already sets radius, --k-card-bg, --k-card-blur,
   --k-border(+2), --k-shadow-sm/md, --k-font-display and font sizing.
   These are the remaining tokens kit components read. */
.liq {
  --k-bg:        #070b1a;
  --k-bg-2:      #0f172a;
  --k-bg-3:      #1e293b;
  --k-surface:   rgba(255, 255, 255, 0.04);
  --k-surface-2: rgba(255, 255, 255, 0.07);
  --k-ink:       #f4f4f7;
  --k-ink-2:     #cad0de;
  --k-ink-3:     #8a93ab;
  --k-mute:      #5a6378;

  --k-success:   #34d399;
  --k-warning:   #fbbf24;
  --k-danger:    #f87171;
  --k-info:      #60a5fa;

  /* Accent — drives the atmosphere blob, CTA breathe glow, focus rings.
     Wired to the app's live 14-theme accent (same vars marketing uses). */
  --k-accent:     var(--color-accent, #7c3aed);
  --k-accent-rgb: var(--accent-rgb, 124, 58, 237);
  --k-glow:       rgba(var(--k-accent-rgb), 0.45);

  --k-pad-sm:  0.5rem;
  --k-pad:     0.85rem 1.2rem;
  --k-pad-lg:  1.5rem;

  --k-font-body:  'Onest', 'Inter', system-ui, sans-serif;
  --k-font-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* Light themes — paper variant for the re-homed tokens.
   (liquid-base.css already flips --k-card-bg / --k-border / shadows.) */
[data-theme="arctic"] .liq,
[data-theme="ivory"]  .liq,
[data-theme="rose"]   .liq,
[data-theme="sage"]   .liq {
  --k-bg:        #f4f4f7;
  --k-bg-2:      #ebebef;
  --k-bg-3:      #dfdfe6;
  --k-surface:   #ffffff;
  --k-surface-2: #f0f0f3;
  --k-ink:       #0d0d12;
  --k-ink-2:     #2d2d35;
  --k-ink-3:     #5a5e68;
  --k-mute:      #8a8d97;
}

/* ---- 2. Body font + content stacking ---- */

/* Onest as the host/admin body face. No !important: `.emoji` (which loads
   later, inline) and any directly-matched rule still win on their elements. */
body.liq {
  font-family: var(--k-font-body);
}

/* Page content sits above the fixed `.liq::before` atmosphere blob (z:0).
   Sidebar (z:160) and topbar (z:150) are already above it with opaque bg. */
body.liq .content,
body.liq #vue-app {
  position: relative;
  z-index: 1;
}

/* Emoji guard — re-assert the color-emoji stack so the Onest body font can
   never win on emoji glyphs. Mirrors templates/base.html (the authority). */
.liq .emoji,
.liq .emoji-icon,
.liq [data-emoji] {
  font-family:
    'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla',
    'EmojiOne Color', 'Android Emoji', 'Segoe UI Symbol', sans-serif !important;
  font-variant-emoji: emoji;
}
.liq .emoji-icon { font-variant-emoji: text; }

/* ---- 3. Token alignment for not-yet-converted scoped components ----
   Components that read --card-bg / --border (the app's theme tokens) pick up
   the glass surface automatically. Scoped components that hardcode their own
   rgba(var(--glass-overlay-color), …) backgrounds are unaffected and convert
   to native .kit-* markup in later phases. We do NOT touch --glass-overlay-color
   or the personality --p-* tokens. */
body.liq .content,
body.liq #vue-app {
  --card-bg: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.16);
}

[data-theme="arctic"] body.liq .content,
[data-theme="ivory"]  body.liq .content,
[data-theme="rose"]   body.liq .content,
[data-theme="sage"]   body.liq .content,
[data-theme="arctic"] body.liq #vue-app,
[data-theme="ivory"]  body.liq #vue-app,
[data-theme="rose"]   body.liq #vue-app,
[data-theme="sage"]   body.liq #vue-app {
  --card-bg: rgba(255, 255, 255, 0.7);
  --border: rgba(0, 0, 0, 0.1);
}

/* ---- Reduced motion ---- (kit files already guard their own keyframes;
   this is a belt-and-suspenders guard for the atmosphere on the app body.) */
@media (prefers-reduced-motion: reduce) {
  .liq::before { animation: none; }
}