/* ============================================================
   SKIN: lumina  —  light "soft glass" (Soft Structuralism)
   White/silver airy room, ultra-diffused periwinkle shadows,
   floating glass, generous radius. From the GPT hero mockups
   + taste-skill `soft-skill`. PURE COSMETICS — honors the base
   contract (state classes, 3D deck math, z-index, layout).
   Self-contained: token overrides + scoped appearance.
   To make a colour variant, copy this file, rename the
   [data-skin="…"] selectors, and change only the token block.
   ============================================================ */

/* ---- TOKENS (light) ---- */
:root[data-skin="lumina"]{
  --bg:#EAEEF7; --panel:#FFFFFF; --panel2:#F3F6FC; --border:#E2E8F4;
  --txt:#27304A; --muted:#8B95AE; --line:#EBEFF8; --line-strong:#D8E0F0; --sel:#E6ECFC;
  --accent:#6E7BFF; --accent2:#56C2F0; --accent-hsl:233 100% 71%; --good:#33C08C; --danger:#F26177; --star:#F6B84A;
  --keycap-top:#FFFFFF; --keycap-bot:#EEF2FB; --keycap-edge:#DCE3F2;
  --inset:rgba(80,100,180,.05); --inset-strong:rgba(80,100,180,.12); --bevel-hi:rgba(255,255,255,.95);
  --glow:rgba(110,123,255,.5); --glow-soft:rgba(86,194,240,.34); --grid:rgba(80,100,180,.04);
  --np-op:.07; --np-blend:multiply; --led:var(--accent);
  /* soft primitives — round, diffused, calm motion */
  --r-card:20px; --r-chip:13px; --r-pop:16px; --r-pill:999px; --ctl-r:10px;
  --sh-ink:rgba(86,104,184,1);
  --sh-card:0 10px 30px -14px rgba(86,104,184,.34);
  --sh-float:0 14px 36px -16px rgba(86,104,184,.32);
  --sh-lift:0 22px 52px -20px rgba(74,92,180,.40);
  --sh-pop:0 30px 66px -22px rgba(64,82,168,.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(20,28,60,.55);
}
/* ---- TOKENS (dark) = deep periwinkle night, still soft ---- */
:root[data-skin="lumina"][data-theme="dark"]{
  --bg:#10131F; --panel:#1A1F30; --panel2:#141826; --border:#2A3147;
  --txt:#E9ECF7; --muted:#8A93AD; --line:#222842; --line-strong:#39415C; --sel:#1C2238;
  --accent:#7E8CFF; --accent2:#5CCBF5; --accent-hsl:233 100% 75%; --good:#4FD4A0; --danger:#FF6F86; --star:#FFC85A;
  --keycap-top:#1E2336; --keycap-bot:#141828; --keycap-edge:#39415C;
  --inset:rgba(0,0,0,.45); --inset-strong:rgba(0,0,0,.6); --bevel-hi:rgba(233,236,247,.08);
  --glow:rgba(126,140,255,.55); --glow-soft:rgba(92,203,245,.34); --grid:rgba(233,236,247,.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) ===== */

/* airy 3D-room backdrop (light only): bright silver room + soft accent pools + floor lift */
:root[data-skin="lumina"]: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,#A9B5DA 46%,transparent), transparent 60%),
    linear-gradient(180deg,#EEF1F9,#E2E8F4);
}
:root[data-skin="lumina"]:not([data-theme="dark"]) #canvasBg::before{opacity:.30}
:root[data-skin="lumina"]:not([data-theme="dark"]) #canvasBg::after{opacity:.05}

/* left rail = floating white-glass card, rounder, soft shadow */
:root[data-skin="lumina"] .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"] .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 white pane */
:root[data-skin="lumina"] #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 = rounder + soft float */
:root[data-skin="lumina"] .disc{border-radius:var(--r-card)}
:root[data-skin="lumina"] .disc-stack{border-radius:calc(var(--r-card) + 4px)}
:root[data-skin="lumina"] .disc:hover{box-shadow:var(--sh-lift)}
:root[data-skin="lumina"] .vgrid .disc{border-radius:var(--r-card)}

/* primary action = periwinkle, soft glow */
:root[data-skin="lumina"] .btn.primary{background:var(--accent);color:#fff;box-shadow:0 9px 24px -8px var(--glow)}
:root[data-skin="lumina"] #btnAccount.on,
:root[data-skin="lumina"] .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 = white glass, big radius, diffused pop shadow */
:root[data-skin="lumina"] .ctxMenu,
:root[data-skin="lumina"] .userMenu,
:root[data-skin="lumina"] .imSheet,
:root[data-skin="lumina"] .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 + floating deckBar chips inherit --glass / --sh-float / --r-chip
   from base; nudge their hairline to the soft periwinkle line for cohesion */
:root[data-skin="lumina"] #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 rings = accent, soft */
:root[data-skin="lumina"] .disc.sel{outline-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),var(--sh-lift)}