/* ============================================================
   LOBBY — theme tokens: dark (default) + light mode.
   Loaded by every main-project page after config.js + theme.js.
   Pages keep their own :root dark values as fallback; this file
   overrides them when <html data-theme="light">.
   Never use filter:invert — every light value below is hand-picked.
   ============================================================ */

/* ── 1. Core app family (red/dark pages) ──
   Covers: index, home, profile, post, group, dms, dm-thread,
   notifications, listing, sell, sellerapprovals, editprofile,
   accountsettings, privacy-settings, blocked-users, followers,
   following, change-username, change-password, delete-account,
   contactsupport, selectavatar, account-restricted, admin, admin-posts */
:root[data-theme="light"]{
  --bg:#f5f1ee; --surface:#ffffff; --surface2:#efe9e4; --surface3:#e7dfd8;
  --line:#e2d7d1; --line-soft:#ece3dc;
  --red:#d40000; --red2:#c00f0f;
  --text:#1d1314; --muted:#6e5a5d; --muted2:#97827f;
  --dim:#97827f;
  --sub:#6e5a5d;
  /* Deep greens tuned for white: AA on white, readable at 11-12px. */
  --green:#0e6b34; --purple:#7c3aed;
  --success:#0e6b34;
  /* World-chat author colors, hand-picked dark variants of the dark palette. */
  --chat-name-1:#c2255c; --chat-name-2:#1971c2; --chat-name-3:#0e6b34;
  --chat-name-4:#9c6d00; --chat-name-5:#862e9c; --chat-name-6:#d9480f;
  --chat-name-7:#0b7285; --chat-name-8:#a61e4d; --chat-name-9:#5c940d;
  --chat-name-10:#364fc7;
}

/* Light-mode surface/scrim remaps for glassy topbars & overlays that
   hardcode dark rgba values instead of using tokens. Scoped to light. */
:root[data-theme="light"] .bar,
:root[data-theme="light"] .glass-thin{
  background:rgba(245,241,238,.9) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
/* index.html floating pill nav: dark glass in dark, white glass in light.
   The bar itself is transparent; only the pill row gets a surface. */
:root[data-theme="light"] .auth-wrap > .topbar{
  background:transparent !important;border:none !important;box-shadow:none !important;
}
:root[data-theme="light"] .auth-wrap > .topbar .topbar-row{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(0,0,0,.09) !important;
  box-shadow:0 8px 28px rgba(90,60,60,.14) !important;
}
:root[data-theme="light"] .save-bar{
  background:rgba(245,241,238,.94) !important;
}
:root[data-theme="light"] .cta-bar{
  background:rgba(245,241,238,.94) !important;
}
:root[data-theme="light"] .chat-messages{
  background-image:
    linear-gradient(rgba(245,241,238,.96),rgba(245,241,238,.97)),
    var(--chat-bg-image, url('https://i.imgur.com/1rLpG1B.png')) !important;
}
:root[data-theme="light"] .messages{
  background-color:var(--bg) !important;
  background-image:
    linear-gradient(rgba(245,241,238,.96),rgba(245,241,238,.97)),
    var(--chat-bg-image, url('https://i.imgur.com/1rLpG1B.png')) !important;
}
:root[data-theme="light"] .chat-input-area,
:root[data-theme="light"] .input-area{
  background:#efe9e4 !important;
}
:root[data-theme="light"] .sticker-panel{
  background:rgba(255,255,255,.96) !important;
}
:root[data-theme="light"] .sheet-backdrop{
  background:rgba(60,40,40,.32) !important;
}

/* Light-mode chat text: own messages stay white-on-red via their
   gradient; plain message text uses the ink token instead of #cfc5c7. */
:root[data-theme="light"] .chat-bubble{
  color:#2a1d1f;
}
:root[data-theme="light"] .chat-sender-time{
  color:rgba(110,90,93,.95) !important;
}

/* Own message text: faded mauve is unreadable on white — use ink. */
:root[data-theme="light"] .chat-row.mine .chat-bubble{
  color:#1d1314 !important;
}

/* Top fade scrim over chat: white gradient in light mode, not black. */
:root[data-theme="light"] #chat-section::before{
  background:linear-gradient(to bottom,rgba(245,241,238,1) 0%,rgba(245,241,238,.9) 18%,rgba(245,241,238,.65) 42%,rgba(245,241,238,.32) 65%,rgba(245,241,238,.1) 84%,rgba(245,241,238,0) 100%) !important;
}
:root[data-theme="light"] .chat-day-separator{
  background:rgba(0,0,0,.05) !important;
  border-color:rgba(0,0,0,.08) !important;
  color:rgba(110,90,93,.8) !important;
}

/* Light-mode hover/active washes that assume a dark canvas. */
:root[data-theme="light"] .chat-row:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .navtab:not(.active):hover .tab-pill{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .navtab.active .live{background:#f5f1ee}
:root[data-theme="light"] .navtab.active{color:#1d1314}
:root[data-theme="light"] .navtab.active .tab-pill{background:#ffffff}
:root[data-theme="light"] .presence-tooltip{background:rgba(29,19,20,.92);color:#fff}
:root[data-theme="light"] .composer-input-wrap:focus-within .composer textarea{border-color:rgba(212,0,0,.5);background:rgba(0,0,0,.025)}
:root[data-theme="light"] .composer-tools{border-top-color:rgba(0,0,0,.08)}
:root[data-theme="light"] .composer-icon-btn:hover{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .composer-preview .rm,
:root[data-theme="light"] .gcomposer-preview .rm{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.4)}
:root[data-theme="light"] .chat-share-card,
:root[data-theme="light"] .chat-reply-banner button{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .topbar{box-shadow:0 1px 0 rgba(0,0,0,.07), 0 8px 24px rgba(90,60,60,.08)}
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .composer,
:root[data-theme="light"] .trending-card,
:root[data-theme="light"] .dropdown,
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .comment-sheet{box-shadow:0 2px 16px rgba(90,60,60,.12), 0 0 0 1px rgba(0,0,0,.05)}
:root[data-theme="light"] .post-actions::before{background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent)}
:root[data-theme="light"] .form-field{box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(90,60,60,.08)}
:root[data-theme="light"] .composer-foot{border-top-color:rgba(0,0,0,.08)}
:root[data-theme="light"] .input-area input,
:root[data-theme="light"] .chat-input-area input{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .input-area input:focus,
:root[data-theme="light"] .chat-input-area input:focus{background:rgba(0,0,0,.08)}
:root[data-theme="light"] .chat-row.mine .chat-sender-name{color:#b30f0f !important}
:root[data-theme="light"] .quote-box{background:rgba(212,0,0,.06);border-left-color:rgba(212,0,0,.45);color:rgba(90,60,62,.85)}
:root[data-theme="light"] .chat-reply-banner{background:rgba(212,0,0,.06);border-top-color:rgba(212,0,0,.25)}
:root[data-theme="light"] .chat-reply-banner .crb-text{color:var(--red2)}
:root[data-theme="light"] .badge-text-pill,
:root[data-theme="light"] .game-badge-inline{border-color:rgba(0,0,0,.1)}
:root[data-theme="light"] .online-count-chip{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08);color:rgba(110,90,93,.9)}
:root[data-theme="light"] #chatProfileLock{background:#f3e9e4}

/* Password-match + username-available greens are hardcoded #4dff8f on every
   auth page — remap to the deep token green in light mode. Inline styles
   beat stylesheets, so this also needs !important. */
:root[data-theme="light"] #obPwChipLabel,
:root[data-theme="light"] #pwChipLabel{color:var(--success)}
:root[data-theme="light"] #obConfirmFeedback,
:root[data-theme="light"] #confirmFeedback,
:root[data-theme="light"] #obUsernameFeedback,
:root[data-theme="light"] #usernameFeedback{color:var(--success) !important}

/* Readable SVG avatar placeholders in light mode. */
:root[data-theme="light"] .ps-avatar,
:root[data-theme="light"] .mock-av{background:#e7dfd8}

/* Wordmark name is hardcoded white on every page — ink it in light mode. */
:root[data-theme="light"] .wordmark-name,
:root[data-theme="light"] .wordmark-name b{color:var(--text)}

/* Inline SVG logo mark: white on dark, pure red on light (JS sets color,
   CSS keeps the geometry responsive inside the old .wordmark-mark boxes). */
.lobby-logo-mark{display:block;width:100%;height:100%;color:#fff}
:root[data-theme="light"] .lobby-logo-mark{color:#ff0000}
.wordmark-mark .lobby-logo-mark{border-radius:inherit}
/* Glass-family icon tiles keep the mark white on their brand gradient. */
.wordmark-icon .lobby-logo-mark{color:#fff}
:root[data-theme="light"] .wordmark-icon .lobby-logo-mark{color:#fff}

/* Slideshow/carousel dots: white active dot is invisible on light surfaces. */
:root[data-theme="light"] .slideshow-dot{background:rgba(0,0,0,.25)}
:root[data-theme="light"] .slideshow-dot.active,
:root[data-theme="light"] .carousel-dot.active{background:var(--red)}
:root[data-theme="light"] .carousel-dot{background:rgba(0,0,0,.25)}

/* Spinner ring assumes dark canvas. */
:root[data-theme="light"] .spinner{border-color:rgba(0,0,0,.15)}

/* Input placeholder text must stay muted, not white. */
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{color:var(--muted2);opacity:1}
:root[data-theme="light"] .input-area input::placeholder{color:rgba(110,90,93,.6)}

/* Signup/signin success states: light green on dark, deep green on white. */
:root[data-theme="light"] .status-msg.success{
  background:rgba(14,107,52,.08);
  border-color:rgba(14,107,52,.3);
  color:var(--success);
}

/* Spin / loading accents assumed white-on-dark. */
:root[data-theme="light"] .spinner{border-color:rgba(0,0,0,.15)}
:root[data-theme="light"] .chat-reply-banner button{color:var(--muted)}

/* Toasts are dark pills in dark mode — keep them dark-on-light as floating alerts. */
:root[data-theme="light"] .toast,
:root[data-theme="light"] #toast{background:#1d1314 !important;color:#f6eeee !important;border-color:transparent}

/* Chat sticker panels and reply banners keep translucent dark treatment in
   light mode only where they overlay chat history; already restyled above. */
/* Delete-confirm danger buttons keep white text on red in both modes. */
:root[data-theme="light"] .banner-btn.accept{color:#fff}
:root[data-theme="light"] .submit-btn,
:root[data-theme="light"] .cta-dm{color:var(--text)}

/* ── 2. account-restricted.html uses --card/--card2/--line2/--pink/--dim ── */
:root[data-theme="light"] .card{background:var(--surface)}
:root[data-theme="light"] .card-row{border-bottom-color:var(--line-soft)}
:root[data-theme="light"] .divider{background:var(--line-soft)}
:root[data-theme="light"] .reason{color:var(--red2)}
:root[data-theme="light"] .timer-box{background:rgba(212,0,0,.05);border-color:rgba(212,0,0,.16)}

/* ── 3. sell.html uses --surface3/--line2/--red-dim/--sub/--dim ── */
:root[data-theme="light"]{--surface3:#e7dfd8; --line2:#e2d7d1; --red-dim:rgba(212,0,0,.08)}

/* ── 4. Glass family (explore.html, wins.html, settings.html) ──
   Same light surfaces, glass borders go dark-on-light. */
:root[data-theme="light"]{
  --bg-soft:#f0eae5;
  --glass-thin:rgba(0,0,0,0.03);
  --glass:rgba(255,255,255,0.72);
  --glass-strong:rgba(255,255,255,0.94);
  --glass-border:rgba(0,0,0,0.09);
  --glass-border-strong:rgba(0,0,0,0.14);
  --specular:rgba(255,255,255,0.9);
  --error:#c00f0f; --success:#178a4c;
}
:root[data-theme="light"] .glass,
:root[data-theme="light"] .glass-strong{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 4px 16px rgba(90,60,60,0.12);
}
:root[data-theme="light"] .dock{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .ov-back{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .ov-back:active{background:rgba(0,0,0,.1)}

/* Glass-family gradient brand text needs a solid fallback on light cards. */
:root[data-theme="light"] .wordmark-name{
  background:none !important;
  -webkit-text-fill-color:var(--text);
  color:var(--text);
}

/* Hero art must stay transparent in both themes — never paint a canvas. */
#welcomeView .hero-video-wrap,
#welcomeView .hero-video-wrap img{
  background:transparent !important;background-color:transparent !important;
}

/* Sensitive-content blur-gate keeps readable text. */

/* Light-mode focus rings stay red but softer on white. */
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus{box-shadow:0 0 0 3px rgba(212,0,0,.14)}