/* vrc.dj  Core: custom properties, reset, scrollbar */
/* --- Custom Properties */
:root {
  --bg-base:        #080b14;
  --bg-surface:     #0c1020;
  --bg-elevated:    #111827;
  --bg-card:        rgba(255,255,255,0.04);
  --bg-card-hover:  rgba(255,255,255,0.07);
  --border:         rgba(255,255,255,0.08);
  --border-bright:  rgba(255,255,255,0.16);
  --accent-base:   #7c3aed;
  --accent-2-base:  #0ea5e9;
  --accent:         var(--accent-base);
  --accent-neutralized: color-mix(in srgb, var(--accent) 20%, #808080);
  --accent-bright:  color-mix(in srgb, var(--accent-base) 75%, white);
  --accent-2:       var(--accent-2-base);
  --accent-glow:    color-mix(in srgb, var(--accent-base) 25%, transparent);
  --text:           #e2e8f0;
  --text-secondary: #7c8a9e;
  --text-muted:     #64748b;
  --white:          #ffffff;
  --radius-sm:      6px;
  --radius:         12px;
  --radius-lg:      18px;
  --ease:           cubic-bezier(0.4,0,0.2,1);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow:         0 4px 16px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.6);
  --nav-bg:         rgba(8,11,20,.88);
  --scrollbar-thumb:rgba(255,255,255,.12);
  --scrollbar-hover:rgba(255,255,255,.22);
  --link-hover-bg:  rgba(255,255,255,.06);

  /* Z-index scale - use these instead of bare numbers so every layer
     is visible and searchable from one place.
     Rule: skip a token? justify it inline (e.g. local stacking context). */
  --z-bg-deep:     -2;    /* fixed page background layers (behind everything) */
  --z-bg:          -1;    /* fixed background overlays (gradient/blur) */
  --z-sticky:      10;    /* sticky/pseudo elements that need to clear content */
  --z-dropdown:    20;    /* collapsible nav menus and tooltip content */
  --z-overlay:    100;    /* listing tooltips, search banners */
  --z-nav:       1030;    /* sticky navigation bar (Bootstrap z-index level) */
  --z-panel:     1049;    /* tag admin panel (just below modal backdrop) */
  --z-dialog:    1050;    /* Bootstrap modals, autocomplete dropdowns */
  --z-dialog-show:1056;   /* shown modal override (above backdrop at 1055) */
  --z-tooltip:   2000;    /* foreground floating tooltips (tag-chip-tt) */
  --z-toast:     9999;    /* toast container (must clear everything) */

  color-scheme: dark;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg-base:        #f5f7fa;
  --bg-surface:     #ffffff;
  --bg-elevated:    #edf0f4;
  --bg-card:        rgba(0,0,0,0.03);
  --bg-card-hover:  rgba(0,0,0,0.06);
  --border:         rgba(0,0,0,0.1);
  --border-bright:  rgba(0,0,0,0.18);
  --accent:         color-mix(in srgb, var(--accent-base) 85%, black);
  --accent-bright:  var(--accent-base);
  --accent-glow:    color-mix(in srgb, var(--accent-base) 15%, transparent);
  --text:           #1e293b;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --white:          #0f172a;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow:         0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --nav-bg:         rgba(255,255,255,.92);
  --scrollbar-thumb:rgba(0,0,0,.15);
  --scrollbar-hover:rgba(0,0,0,.25);
  --link-hover-bg:  rgba(0,0,0,.05);
  color-scheme: light;
}
[data-theme="light"] .navbar-brand img,
[data-theme="light"] .site-footer img { filter: invert(1); }

/* System preference: light mode (auto + OS light, before JS resolves data-theme).
   Both this and [data-theme="light"] are required: this handles the initial CSS render
   before the flash-prevention script runs; explicit [data-theme="light"] handles all
   remaining cases including dark-OS users who explicitly chose light theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .navbar-brand img,
  :root:not([data-theme="dark"]) .site-footer img { filter: invert(1); }
  :root:not([data-theme="dark"]) {
    --bg-base:        #f5f7fa;
    --bg-surface:     #ffffff;
    --bg-elevated:    #edf0f4;
    --bg-card:        rgba(0,0,0,0.03);
    --bg-card-hover:  rgba(0,0,0,0.06);
    --border:         rgba(0,0,0,0.1);
    --border-bright:  rgba(0,0,0,0.18);
    --accent:         color-mix(in srgb, var(--accent-base) 85%, black);
    --accent-bright:  var(--accent-base);
    --accent-glow:    color-mix(in srgb, var(--accent-base) 15%, transparent);
    --text:           #1e293b;
    --text-secondary: #64748b;
    --text-muted:     #94a3b8;
    --white:          #0f172a;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    --shadow:         0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --shadow-lg:      0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    --nav-bg:         rgba(255,255,255,.92);
    --scrollbar-thumb:rgba(0,0,0,.15);
    --scrollbar-hover:rgba(0,0,0,.25);
    --link-hover-bg:  rgba(0,0,0,.05);
    color-scheme: light;
  }
}

/* --- Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg-base);
  background-image: radial-gradient(ellipse 100% 45% at 50% -2%, color-mix(in srgb, var(--accent-base) 6%, transparent), transparent 55%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main       { flex: 1 1 auto; display: flex; flex-direction: column; }
img        { max-width: 100%; }
a          { color: var(--accent-bright); text-decoration: none; transition: color .18s var(--ease); }
a:hover    { color: var(--white); }

/* --- Scrollbar */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-hover); }