/* Aurora — soft pink + amber + cream on a near-white canvas.
 *
 * Inspired by the Aurora customization pack: pink, peach and warm
 * white running across the UI like the pack's flowing gradient. The
 * panel is bright cream so the colours sit on a daylight surface, not
 * a deep-space black. Tints lean rose so hovers/dividers feel like
 * watercolour rather than pure black-on-white.
 *
 * Token-only file: no structural CSS lives here. */

:root[data-theme="aurora"] {
  /* Surfaces — bright warm cream for the daylight feel. */
  --bg:           #fff7f3;
  --panel:        rgba(255, 250, 247, 0.97);
  --glass:        rgba(255, 126, 182, 0.04);
  --gb:           rgba(60, 25, 35, 0.08);

  /* Typography — warm ink so it reads on cream without going pure black. */
  --t1: rgba(36, 14, 26, 0.94);
  --t2: rgba(80, 40, 60, 0.62);
  --t3: rgba(120, 70, 90, 0.36);

  /* Brand accent: pink-rose + amber 2-stop. */
  --accent:   #ff5fa2;
  --accent-2: #c44a3a;
  --ag:       rgba(255, 95, 162, 0.4);

  /* Semantic — slightly muted so warn/danger don't fight the soft palette. */
  --success:  #15803d;
  --warn:     #b45309;
  --danger:   #b91c1c;
  --pink:     #ff5fa2;

  /* Tier badges — keep gold/red anchors. */
  --legendary: #b45309;
  --epic:      #be185d;
  --rare:      #ff5fa2;
  --common:    #57534e;

  --selection-bg: rgba(255, 95, 162, 0.30);
  --selection-fg: #260a18;

  /* Surface tints — warm pink wash so hovers feel like watercolour. */
  --tint-1: rgba(60,25,35,0.022);
  --tint-2: rgba(60,25,35,0.045);
  --tint-3: rgba(60,25,35,0.07);
  --tint-4: rgba(60,25,35,0.09);
  --tint-5: rgba(60,25,35,0.12);
  --tint-6: rgba(60,25,35,0.16);
  --tint-7: rgba(60,25,35,0.20);
  --tint-9: rgba(60,25,35,0.30);
  --tint-strong: rgba(60,25,35,0.55);

  --border-1: rgba(60,25,35,0.05);
  --border-2: rgba(60,25,35,0.08);
  --border-3: rgba(60,25,35,0.11);
  --border-4: rgba(60,25,35,0.14);
  --border-5: rgba(60,25,35,0.18);

  --shadow-soft:   0 12px 36px rgba(180, 80, 110, 0.18);
  --shadow-strong: 0 20px 40px rgba(180, 80, 110, 0.24);

  --greet-grad: linear-gradient(135deg, #ff7eb6 0%, #ffb88c 55%, #c44a3a 100%);

  --cover-scrim: linear-gradient(180deg, rgba(255,247,243,0.05), rgba(255,247,243,0.55));

  --av-default-grad:      radial-gradient(circle at 35% 30%, rgba(255,210,210,0.55), #ff7eb6 50%, #c44a3a);
  --av-default-grad-warm: radial-gradient(circle at 35% 30%, rgba(255,225,225,0.6), #ffb88c 55%, #c44a3a);

  --orb-inner-highlight: rgba(255,255,255,0.85);
  --orb-inner-shadow:    rgba(120, 50, 70, 0.18);

  --brand-glow-strong: rgba(255, 95, 162, 0.40);
  --brand-glow:        rgba(255, 95, 162, 0.28);
  --brand-glow-soft:   rgba(255, 95, 162, 0.14);
  --brand-glow-faint:  rgba(255, 95, 162, 0.06);

  /* Aurora sky — pink/amber/cream radials painted on the body so the
   * canvas feels like the pack's flowing gradient frozen in place. */
  --scene-paint:
    radial-gradient(ellipse 90% 60% at 12% 18%, rgba(255, 126, 182, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 86% 8%,  rgba(255, 184, 140, 0.20), transparent 70%),
    radial-gradient(ellipse 70% 50% at 78% 92%, rgba(255, 240, 168, 0.20), transparent 65%),
    radial-gradient(ellipse 50% 30% at 25% 78%, rgba(255, 200, 220, 0.18), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,247,243,0) 30%, rgba(255,237,233,0.5) 70%, rgba(255,250,247,0.7) 100%),
    var(--bg);
}

:root[data-theme="aurora"] body {
  background: var(--scene-paint);
}

/* Cosmos starfield was tuned for deep-space dark themes; on the cream
 * canvas it would read as visual noise. Mute and invert so the stars
 * become very soft pink/peach hints. */
:root[data-theme="aurora"] .stars,
:root[data-theme="aurora"] .cosmos::before,
:root[data-theme="aurora"] .cosmos::after {
  opacity: 0.20;
  filter: invert(1) hue-rotate(310deg);
}

/* Auth/splash + identity panels need a bright surface; they're
 * near-black by default. */
:root[data-theme="aurora"] .auth-card,
:root[data-theme="aurora"] .smodal,
:root[data-theme="aurora"] .ctx-menu,
:root[data-theme="aurora"] .banner-portal-menu,
:root[data-theme="aurora"] .toast,
:root[data-theme="aurora"] .srv-orb-tip,
:root[data-theme="aurora"] .vu-item::after,
:root[data-theme="aurora"] .ms-row::after {
  background: var(--panel);
  color: var(--t1);
  border: 1px solid var(--border-3);
  box-shadow: var(--shadow-soft);
}

/* Inputs swap to a paper-feel surface. */
:root[data-theme="aurora"] input,
:root[data-theme="aurora"] textarea,
:root[data-theme="aurora"] .sm-input,
:root[data-theme="aurora"] .qs-input,
:root[data-theme="aurora"] select {
  background: rgba(255,255,255,0.85);
  color: var(--t1);
  border-color: var(--border-3);
}
:root[data-theme="aurora"] input::placeholder,
:root[data-theme="aurora"] textarea::placeholder {
  color: var(--t3);
}

/* Glass + chat surfaces. */
:root[data-theme="aurora"] .glass-panel {
  background: rgba(255,250,247,0.55);
  border-color: var(--border-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow-soft);
}
:root[data-theme="aurora"] #dmMsgs,
:root[data-theme="aurora"] .ws-channel-msgs,
:root[data-theme="aurora"] .members-sidebar {
  background: rgba(255,250,247,0.55);
}

/* DM bubbles — ink-on-cream incoming, pink-gradient outgoing. */
:root[data-theme="aurora"] .dm-bubble {
  background: rgba(60,25,35,0.04);
  color: var(--t1);
  border: 1px solid var(--border-2);
}
:root[data-theme="aurora"] .dm-row[data-mine="1"] .dm-bubble,
:root[data-theme="aurora"] .dm-bubble.is-mine {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  border-color: transparent;
}

/* World channel msg + avatar rings + presence dots. */
:root[data-theme="aurora"] .ws-msg-text {
  background: rgba(60,25,35,0.04);
  color: var(--t1);
  border: 1px solid var(--border-2);
}
:root[data-theme="aurora"] .vu-av,
:root[data-theme="aurora"] .ms-av,
:root[data-theme="aurora"] .friend-bubble-av {
  border-color: var(--border-4);
}
:root[data-theme="aurora"] .ms-av.online::after,
:root[data-theme="aurora"] .vu-av .vu-s {
  border-color: var(--panel);
}

/* Empty-state placeholder orb. */
:root[data-theme="aurora"] .orb-slide.empty-state .planet {
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), #ffd8e6 55%, #d4a8b8) !important;
}

/* Selection */
:root[data-theme="aurora"] ::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Banner action buttons — bright chips on the cream canvas. */
:root[data-theme="aurora"] .ws-banner-menu-btn,
:root[data-theme="aurora"] .ws-banner-share-btn,
:root[data-theme="aurora"] .ws-banner-leave-btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--accent);
  color: var(--accent);
}
:root[data-theme="aurora"] .ws-banner-menu-btn:hover,
:root[data-theme="aurora"] .ws-banner-share-btn:hover {
  background: var(--brand-glow-soft);
  border-color: var(--accent-2);
  color: var(--accent-2);
}
:root[data-theme="aurora"] .ws-banner-leave-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.55);
  color: var(--danger);
}

/* Bottom taskbar. */
:root[data-theme="aurora"] .taskbar {
  background:
    radial-gradient(ellipse at 50% 0%, var(--brand-glow-soft), transparent 65%),
    rgba(255, 250, 247, 0.85);
  border-top: 1px solid var(--border-3);
}
:root[data-theme="aurora"] .tb { color: var(--t2); }
:root[data-theme="aurora"] .tb:hover { background: var(--tint-3); color: var(--t1); }
:root[data-theme="aurora"] .tb.active {
  background: linear-gradient(135deg, var(--brand-glow-soft), var(--brand-glow));
  color: var(--accent);
  border-color: var(--ag);
}

/* Category title gradient. */
:root[data-theme="aurora"] .ws-cat-h-name {
  background: linear-gradient(90deg, var(--t1), var(--accent) 50%, var(--t1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 95, 162, 0.20);
}
:root[data-theme="aurora"] .ws-cat-h-name::before,
:root[data-theme="aurora"] .ws-cat-h-name::after {
  background: linear-gradient(90deg, transparent, rgba(255, 95, 162, 0.6));
}
:root[data-theme="aurora"] .ws-cat-h-name::after {
  background: linear-gradient(90deg, rgba(255, 95, 162, 0.6), transparent);
}

/* DM head + input bars: pink/amber wash echoing the pack. */
:root[data-theme="aurora"] .dm-head {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 95, 162, 0.10), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(255, 184, 140, 0.10), transparent 55%),
    rgba(255, 250, 247, 0.92);
}
:root[data-theme="aurora"] .dm-head::after {
  background: linear-gradient(90deg, transparent, var(--ag), transparent);
  height: 1px;
}
:root[data-theme="aurora"] .dm-input-wrap {
  background: transparent;
  border-top: none;
}
:root[data-theme="aurora"] .dm-conv,
:root[data-theme="aurora"] #dmMsgs {
  background: transparent;
}