/* ============================================================
   PULSEDECK — LIQUID GLASS  ·  LIGHT MODE TOKEN SYSTEM (Part 2)
   Every preset / theme / accent / density / a11y choice is a
   NAMED set of CSS variables. Backend stores keys, not numbers.
   ============================================================ */

:root {
  /* ---- INK ------------------------------------------------- */
  --ink:    #22242E;
  --ink-2:  #54586A;
  --ink-3:  #878B99;
  --ink-on-accent: #ffffff;

  /* ---- ACCENT (set by swatch · default System Blue) -------- */
  --accent:       #7C3AED;
  --acc-1: #9B6BFF; --acc-2: #7C3AED; --acc-3: #6D28D9; --acc-rgb: 124,58,237;
  --accent-press: color-mix(in srgb, var(--accent) 82%, black);
  --accent-soft:  color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-lens:  color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-ring:  color-mix(in srgb, var(--accent) 45%, transparent);

  /* ---- CANVAS --------------------------------------------- */
  --canvas-1: #D7D9DF;
  --canvas-2: #BEC1CA;
  --wash-a:   #ffffff;   /* white orb glow */
  --wash-b:   #A9ADB8;   /* silver depth  */
  --wash-c:   #DCDEE4;   /* neutral haze — widget classic */
  --wash-op:  1;

  /* ---- GLASS RECIPE (the preset surface) ------------------ */
  --glass-bg:      rgba(232,234,240,0.30);
  --glass-solid:   rgba(243,244,248,0.72);   /* text-dense areas */
  --glass-blur:    26px;
  --glass-sat:     190%;
  --glass-border:  rgba(255,255,255,0.88);
  --rim-top:       rgba(255,255,255,1);
  --rim-bottom:    rgba(17,24,50,0.09);
  --glass-inner:   inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 14px 34px -22px rgba(255,255,255,0.55);
  --sheen-op:      0.65;                      /* specular sheen */
  --panel-shadow:  0 24px 50px -16px rgba(35,38,50,0.30), 0 3px 10px -5px rgba(35,38,50,0.12);

  /* ---- GEOMETRY ------------------------------------------- */
  --r-card: 22px;
  --r-tile: 18px;
  --r-pill: 999px;
  --r-ctrl: 14px;

  /* ---- DENSITY -------------------------------------------- */
  --row-pad-y: 13px;
  --section-gap: 26px;

  /* ---- FOCUS ---------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --focus-show: 0;     /* a11y "always show focus" flips to 1 via outline rules */

  /* ---- TYPE ----------------------------------------------- */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --speed: 240ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ===========================================================
   PRESETS — each is a tuned bundle of the glass variables.
   Applied as .preset-* on the root wrapper.
   =========================================================== */

/* Crisp — reduced blur, higher contrast, flatter (clarity / perf) */
.preset-crisp {
  --glass-bg:     rgba(255,255,255,0.84);
  --glass-solid:  rgba(255,255,255,0.92);
  --glass-blur:   12px;
  --glass-sat:    130%;
  --glass-border: rgba(60,70,100,0.16);
  --rim-top:      rgba(255,255,255,0.8);
  --rim-bottom:   rgba(17,24,50,0.08);
  --glass-inner:  0 0 transparent;
  --sheen-op:     0;
  --panel-shadow: 0 6px 18px -10px rgba(40,52,86,0.22), 0 1px 2px rgba(40,52,86,0.10);
  --r-card: 16px; --r-tile: 14px;
}

/* Frosted — heavier blur, softer, dreamier */
.preset-frosted {
  --glass-bg:     rgba(255,255,255,0.5);
  --glass-solid:  rgba(255,255,255,0.66);
  --glass-blur:   58px;
  --glass-sat:    200%;
  --glass-border: rgba(255,255,255,0.75);
  --sheen-op:     0.7;
  --panel-shadow: 0 26px 70px -26px rgba(40,52,86,0.34), 0 3px 12px -6px rgba(40,52,86,0.12);
  --r-card: 28px; --r-tile: 22px;
}

/* High Contrast — solid surfaces, bold ink, strong focus (accessibility) */
.preset-contrast {
  --glass-bg:     #ffffff;
  --glass-solid:  #ffffff;
  --glass-blur:   0px;
  --glass-sat:    100%;
  --glass-border: rgba(28,28,30,0.34);
  --rim-top:      rgba(255,255,255,0);
  --rim-bottom:   rgba(0,0,0,0);
  --glass-inner:  0 0 transparent;
  --sheen-op:     0;
  --panel-shadow: 0 2px 0 rgba(28,28,30,0.10), 0 8px 18px -12px rgba(28,28,30,0.25);
  --ink:   #000000;
  --ink-2: #3a3a3c;
  --ink-3: #5a5a5e;
  --glass-border-w: 1.5px;
  --focus-ring: 0 0 0 3px var(--accent), 0 0 0 5px rgba(255,255,255,0.9);
}

/* ===========================================================
   THEME — Light (base) · Dark · Auto (follows device)
   =========================================================== */
.theme-dark {
  --ink:    #f5f5f7;
  --ink-2:  #a1a1a6;
  --ink-3:  #6e6e73;
  --canvas-1: #141118;
  --canvas-2: #1d1826;
  --wash-a: #6D28D9;
  --wash-b: #C026A6;
  --wash-c: #0E8A94;
  --wash-op: 1;
  --glass-bg:     rgba(54,46,60,0.34);
  --glass-solid:  rgba(56,48,60,0.55);
  --glass-border: rgba(255,255,255,0.30);
  --rim-top:      rgba(255,255,255,0.55);
  --rim-bottom:   rgba(0,0,0,0.30);
  --glass-inner:  inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 14px 34px -22px rgba(255,255,255,0.26);
  --panel-shadow: 0 30px 80px -26px rgba(0,0,0,0.8), 0 3px 10px -5px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
  .theme-auto {
    --ink:    #f5f5f7;
    --ink-2:  #a1a1a6;
    --ink-3:  #6e6e73;
    --canvas-1: #141118;
    --canvas-2: #1d1826;
    --wash-a: #6D28D9;
    --wash-b: #C026A6;
    --wash-c: #0E8A94;
    --wash-op: 1;
    --glass-bg:     rgba(54,46,60,0.34);
    --glass-solid:  rgba(56,48,60,0.55);
    --glass-border: rgba(255,255,255,0.30);
    --rim-top:      rgba(255,255,255,0.55);
    --rim-bottom:   rgba(0,0,0,0.30);
    --glass-inner:  inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 14px 34px -22px rgba(255,255,255,0.26);
    --panel-shadow: 0 30px 80px -26px rgba(0,0,0,0.8), 0 3px 10px -5px rgba(0,0,0,0.45);
  }
}

/* ===========================================================
   DENSITY
   =========================================================== */
.density-compact { --row-pad-y: 8px; --section-gap: 18px; }

/* ===========================================================
   ACCESSIBILITY (override presets — placed AFTER, so they win)
   =========================================================== */
.a11y-no-transp {
  --glass-bg:    #ffffff;
  --glass-solid: #ffffff;
  --glass-blur:  0px;
  --sheen-op:    0;
  --glass-inner: 0 0 transparent;
  --wash-op:     0.35;
}
.a11y-no-transp.theme-dark, .a11y-no-transp .theme-dark { --glass-bg: #20242d; --glass-solid: #20242d; }
.a11y-contrast {
  --ink: #000; --ink-2: #2c2c2e; --ink-3: #48484a;
  --glass-border: rgba(28,28,30,0.3);
}
.a11y-contrast.theme-dark { --ink:#fff; --ink-2:#d1d1d6; --glass-border: rgba(255,255,255,0.3); }

/* ===========================================================
   BASE
   =========================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv01" 1;
  overflow: hidden;
}
svg.lucide, [data-lucide] svg, .lg-root svg { stroke-width: 1.6; }
[x-cloak] { display: none !important; }
::selection { background: var(--accent-lens); }

.lg-root {
  position: relative;
  height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(70% 55% at 12% 0%, color-mix(in srgb, var(--wash-a) calc(var(--wash-op)*100%), transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--wash-b) calc(var(--wash-op)*100%), transparent), transparent 70%),
    radial-gradient(48% 42% at 82% 8%, color-mix(in srgb, var(--wash-c, transparent) calc(var(--wash-op)*72%), transparent), transparent 70%),
    linear-gradient(155deg, var(--canvas-1), var(--canvas-2));
  transition: background var(--speed) var(--ease);
  isolation: isolate;
}

/* ---- GLASS primitive ------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: var(--glass-border-w, 1px) solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 1px 0 var(--rim-top),
    inset 0 -1px 1px var(--rim-bottom),
    var(--glass-inner, 0 0 transparent),
    var(--panel-shadow);
  transition: background var(--speed) var(--ease), backdrop-filter var(--speed) var(--ease),
              border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
/* diagonal specular sheen on large panels */
.glass.sheen::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,calc(0.9*var(--sheen-op))) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(255,255,255,calc(0.25*var(--sheen-op))) 100%);
  opacity: 1;
  -webkit-mask: linear-gradient(#000,#000);
}
.glass.sheen.glide::before { animation: sheenGlide 9s var(--ease) infinite; }
@keyframes sheenGlide {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(2%); opacity: .78; }
}

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 30%, transparent); background-clip: padding-box; }

/* ============================================================
   APP SHELL (light)
   ============================================================ */
.app { position: relative; z-index: 1; display: flex; height: 100vh; }

.nav-rail {
  width: 72px; flex: 0 0 72px; display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 6px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 var(--rim-top);
}
.brand {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px;
  color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 90%, white), var(--accent));
  box-shadow: 0 6px 16px -6px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.5);
}
.brand svg { width: 22px; height: 22px; }
.nav-item {
  position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--ink-3); cursor: pointer; transition: var(--speed) var(--ease);
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-lens); }
.nav-spacer { flex: 1; }

.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 64px; flex: 0 0 64px; display: flex; align-items: center; gap: 16px; padding: 0 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--rim-top);
}
.topbar .crumb { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.topbar .crumb svg { width: 19px; height: 19px; color: var(--accent); }
.topbar .crumb .sep { color: var(--ink-3); font-weight: 400; }
.topbar .crumb .cur { color: var(--ink); }
.topbar .crumb .root { color: var(--ink-2); }
.topbar .spacer { flex: 1; }

.searchbar {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; min-width: 260px;
  border-radius: var(--r-pill); background: var(--glass-solid); border: 1px solid var(--glass-border);
  color: var(--ink-2); box-shadow: inset 0 1px 0 var(--rim-top);
}
.searchbar svg { width: 16px; height: 16px; }
.searchbar input { all: unset; flex: 1; font: 400 14px var(--font); color: var(--ink); }
.searchbar input::placeholder { color: var(--ink-3); }

.agent-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: var(--r-pill);
  background: var(--glass-solid); border: 1px solid var(--glass-border); cursor: pointer; box-shadow: inset 0 1px 0 var(--rim-top); }
.agent-chip .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px var(--font);
  background: linear-gradient(140deg, #ff9a62, #ff5f7e); }
.agent-chip b { font: 600 13.5px var(--font); }
.agent-chip span { display: block; font: 500 11px var(--font); color: var(--ink-3); }

/* ---- avatars / pills used in shell & preview ------------- */
.avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: var(--r-pill);
  font: 600 12px var(--font); white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill-accent { background: var(--accent-soft); color: var(--accent); }
.pill-accent .dot { background: var(--accent); }
.pill-note { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }

/* ---- buttons --------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
  font: 600 14px var(--font); padding: 0 18px; height: 40px; border-radius: var(--r-pill);
  transition: var(--speed) var(--ease); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(180deg, var(--acc-1, var(--accent)), var(--acc-2, var(--accent))); color: var(--ink-on-accent);
  box-shadow: 0 8px 20px -8px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:disabled { opacity: 0.42; cursor: default; box-shadow: none; }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.btn-glass { background: var(--glass-solid); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--rim-top); }
.btn-glass:hover { background: color-mix(in srgb, var(--ink) 5%, var(--glass-solid)); }

/* ---- dark mode: text shine on hover ----------------------- */
.theme-dark .btn:hover, .theme-dark .nav-item:hover, .theme-dark .menu-item:hover,
.theme-dark .icon-btn:hover, .theme-dark .fchip:hover, .theme-dark a:hover,
.theme-dark .seg-sm button:hover, .theme-dark .tag-add:hover, .theme-dark .cfg-item:hover,
.theme-dark .dept-btn:hover, .theme-dark .avail-btn:hover, .theme-dark .mass-btn:hover {
  text-shadow: 0 0 14px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.35);
}
@media (prefers-color-scheme: dark) {
  .theme-auto .btn:hover, .theme-auto .nav-item:hover, .theme-auto .menu-item:hover,
  .theme-auto .icon-btn:hover, .theme-auto .fchip:hover, .theme-auto a:hover,
  .theme-auto .seg-sm button:hover, .theme-auto .tag-add:hover, .theme-auto .cfg-item:hover,
  .theme-auto .dept-btn:hover, .theme-auto .avail-btn:hover, .theme-auto .mass-btn:hover {
    text-shadow: 0 0 14px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.35);
  }
}