/* ============================================================
   SKIN: lumina-pink  —  light "soft glass", rose/lilac variant
   Sibling of lumina (img 3 FANVAULT). Same soft-glass appearance,
   only the token block differs → shows that a whole new look can
   be a pure token swap. PURE COSMETICS; honors the base contract.
   ============================================================ */

/* ---- TOKENS (light) ---- */
:root[data-skin="lumina-pink"]{
  --bg:#F4EDF4; --panel:#FFFFFF; --panel2:#FAF3FA; --border:#EEDFEC;
  --txt:#3A2A40; --muted:#A18BA6; --line:#F3E7F2; --line-strong:#E6D2E6; --sel:#FBE7F1;
  --accent:#FF5C9A; --accent2:#B69CFF; --accent-hsl:333 100% 68%; --good:#33C08C; --danger:#F2516B; --star:#F6B84A;
  --keycap-top:#FFFFFF; --keycap-bot:#FBF0F8; --keycap-edge:#EBD9EA;
  --inset:rgba(170,110,160,.05); --inset-strong:rgba(170,110,160,.12); --bevel-hi:rgba(255,255,255,.95);
  --glow:rgba(255,92,154,.5); --glow-soft:rgba(182,156,255,.34); --grid:rgba(170,110,160,.04);
  --np-op:.07; --np-blend:multiply; --led:var(--accent);
  --r-card:20px; --r-chip:13px; --r-pop:16px; --r-pill:999px; --ctl-r:10px;
  --sh-ink:rgba(180,110,160,1);
  --sh-card:0 10px 30px -14px rgba(190,120,170,.34);
  --sh-float:0 14px 36px -16px rgba(190,120,170,.32);
  --sh-lift:0 22px 52px -20px rgba(180,100,160,.40);
  --sh-pop:0 30px 66px -22px rgba(170,90,150,.34);
  --blur-glass:22px;
  --glass:color-mix(in srgb,var(--panel) 68%,transparent);
  --glass-panel:color-mix(in srgb,var(--panel) 84%,transparent);
  --ease:cubic-bezier(.32,.72,0,1);
  --ink-media:#fff; --scrim:rgba(50,24,48,.55);
}
/* ---- TOKENS (dark) = deep plum night ---- */
:root[data-skin="lumina-pink"][data-theme="dark"]{
  --bg:#1A1020; --panel:#271A2E; --panel2:#1E1424; --border:#3D2A44;
  --txt:#F4E9F2; --muted:#AD92AE; --line:#2E2034; --line-strong:#4A3550; --sel:#2A1A30;
  --accent:#FF6FA8; --accent2:#C4A8FF; --accent-hsl:333 100% 72%; --good:#4FD4A0; --danger:#FF6F86; --star:#FFC85A;
  --keycap-top:#271A2E; --keycap-bot:#1B1222; --keycap-edge:#4A3550;
  --inset:rgba(0,0,0,.45); --inset-strong:rgba(0,0,0,.6); --bevel-hi:rgba(244,233,242,.08);
  --glow:rgba(255,111,168,.55); --glow-soft:rgba(196,168,255,.34); --grid:rgba(244,233,242,.035);
  --np-op:.12; --np-blend:screen;
  --sh-card:0 10px 30px -14px rgba(0,0,0,.55);
  --sh-float:0 14px 36px -16px rgba(0,0,0,.5);
  --sh-lift:0 22px 52px -20px rgba(0,0,0,.62);
  --sh-pop:0 30px 66px -22px rgba(0,0,0,.62);
  --scrim:rgba(0,0,0,.62);
}

/* ===== APPEARANCE (scoped to lumina-pink) ===== */

/* airy 3D-room backdrop (light only): bright rose room + soft accent pools + floor lift */
:root[data-skin="lumina-pink"]:not([data-theme="dark"]) #canvasBg{
  background:
    radial-gradient(120% 92% at 50% 6%, #FFFFFF, transparent 58%),
    radial-gradient(78% 60% at 15% 10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    radial-gradient(80% 62% at 88% 88%, color-mix(in srgb,var(--accent2) 18%,transparent), transparent 62%),
    radial-gradient(150% 72% at 50% 118%, color-mix(in srgb,#D8BCD4 46%,transparent), transparent 60%),
    linear-gradient(180deg,#F7EFF6,#EEE0EC);
}
:root[data-skin="lumina-pink"]:not([data-theme="dark"]) #canvasBg::before{opacity:.30}
:root[data-skin="lumina-pink"]:not([data-theme="dark"]) #canvasBg::after{opacity:.05}

/* left rail = floating white-glass card */
:root[data-skin="lumina-pink"] .panelTabs{
  background:var(--glass-panel);
  backdrop-filter:blur(var(--blur-glass)) saturate(1.25);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.25);
  border:1px solid color-mix(in srgb,var(--line-strong) 65%,transparent);
  border-radius:18px; box-shadow:var(--sh-card);
}
:root[data-skin="lumina-pink"] .panelTab.on{
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent),0 7px 18px -8px var(--glow);
}

/* main content = frosted pane */
:root[data-skin="lumina-pink"] #content{
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
}

/* cards */
:root[data-skin="lumina-pink"] .disc{border-radius:var(--r-card)}
:root[data-skin="lumina-pink"] .disc-stack{border-radius:calc(var(--r-card) + 4px)}
:root[data-skin="lumina-pink"] .disc:hover{box-shadow:var(--sh-lift)}
:root[data-skin="lumina-pink"] .vgrid .disc{border-radius:var(--r-card)}

/* primary action */
:root[data-skin="lumina-pink"] .btn.primary{background:var(--accent);color:#fff;box-shadow:0 9px 24px -8px var(--glow)}
:root[data-skin="lumina-pink"] #btnAccount.on,
:root[data-skin="lumina-pink"] .panelTab.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 7px 18px -8px var(--glow)}

/* popovers / menus / sheets */
:root[data-skin="lumina-pink"] .ctxMenu,
:root[data-skin="lumina-pink"] .userMenu,
:root[data-skin="lumina-pink"] .imSheet,
:root[data-skin="lumina-pink"] .stakChipsWrap.open .stakChips{
  background:var(--glass-panel);
  backdrop-filter:blur(var(--blur-glass)) saturate(1.25);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.25);
  border:1px solid color-mix(in srgb,var(--line-strong) 65%,transparent);
  border-radius:var(--r-pop); box-shadow:var(--sh-pop);
}

/* immersive bottom playbar */
:root[data-skin="lumina-pink"] #miniBar{
  background:var(--glass-panel);
  backdrop-filter:blur(var(--blur-glass)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.2);
  border-top:1px solid color-mix(in srgb,var(--line-strong) 60%,transparent);
}

/* selection / focus */
:root[data-skin="lumina-pink"] .disc.sel{outline-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),var(--sh-lift)}