/* ============================================================
   NEXUS.GG — Base
   Tokens · Reset · Typography · Grain · Animations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Syne:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Dark theme (default) ─────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-base:        #09080b;
  --bg-raised:      #100e14;
  --bg-elevated:    #16131c;
  --bg-float:       #1e1a27;
  --bg-hover:       #252030;

  --gold:           #b8952c;
  --gold-bright:    #d4a93a;
  --gold-dim:       #6e5a1a;
  --gold-subtle:    rgba(184,149,44,0.10);
  --gold-border:    rgba(184,149,44,0.18);
  --gold-border-hv: rgba(184,149,44,0.36);
  --gold-glow:      rgba(184,149,44,0.14);

  --text-primary:   #f0ebe0;
  --text-secondary: #c8c0d8;
  --text-muted:     #9a8aaa;
  --text-faint:     #6e6280;
  --text-inverse:   #09080b;

  --accent-live:    #e54c4c;
  --accent-teal:    #2de1b2;
  --accent-purple:  #9d6fce;
  --accent-blue:    #4a90d9;
  --accent-orange:  #d4823a;

  --border-subtle:  rgba(184,149,44,0.10);
  --border-default: rgba(184,149,44,0.20);
  --border-strong:  rgba(184,149,44,0.38);

  --shadow-sm:   0 1px 6px rgba(0,0,0,0.50);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.60);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.70);
  --shadow-gold: 0 0 28px rgba(184,149,44,0.14);

  --header-bg:      rgba(9,8,11,0.86);
  --grain-opacity:  0.040;
  --grain-blend:    soft-light;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --space:           8px;
  --transition:      0.18s ease;
  --transition-slow: 0.32s ease;

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   1000;   /* above grain overlay at 999 */
}

/* ── Light theme — warm parchment ────────────────────────── */
[data-theme="light"] {
  --bg-base:        #f2ede8;
  --bg-raised:      #ebe5de;
  --bg-elevated:    #e3dbd2;
  --bg-float:       #d9d0c5;
  --bg-hover:       #cec4b8;

  --gold:           #8a6d1a;
  --gold-bright:    #a07e20;
  --gold-dim:       #b8952c;
  --gold-subtle:    rgba(138,109,26,0.09);
  --gold-border:    rgba(138,109,26,0.22);
  --gold-border-hv: rgba(138,109,26,0.42);
  --gold-glow:      rgba(138,109,26,0.10);

  --text-primary:   #1a1520;
  --text-secondary: #3a3048;
  --text-muted:     #5a4e68;
  --text-faint:     #7a6e86;
  --text-inverse:   #f0ebe0;

  --accent-live:    #c0392b;
  --accent-teal:    #1a9e7e;
  --accent-purple:  #6b44a8;
  --accent-blue:    #2e6db0;
  --accent-orange:  #b0621a;

  --border-subtle:  rgba(138,109,26,0.13);
  --border-default: rgba(138,109,26,0.24);
  --border-strong:  rgba(138,109,26,0.42);

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.10);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.14);
  --shadow-lg:   0 10px 32px rgba(0,0,0,0.18);
  --shadow-gold: 0 0 20px rgba(138,109,26,0.10);

  --header-bg:     rgba(242,237,232,0.88);
  --grain-opacity: 0.024;
  --grain-blend:   multiply;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-bright); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ── Film-grain overlay ───────────────────────────────────── */
/*
 * Fixed pseudo-element sits above everything (z:999) but
 * pointer-events:none so it never interferes with clicks.
 * mix-blend-mode adapts per theme token.
 * Toast container uses z-index 1000 to stay above it.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  transition: opacity var(--transition-slow);
}

/* ── Typography ───────────────────────────────────────────── */
.font-display { font-family: 'Cinzel', serif;           font-weight: 700; letter-spacing: 0.06em; }
.font-ui      { font-family: 'Syne', sans-serif;        font-weight: 600; letter-spacing: 0.04em; }
.font-body    { font-family: 'Inter', sans-serif;       font-weight: 400; }
.font-mono    { font-family: 'JetBrains Mono', monospace; font-weight: 400; }

h1,h2,h3,h4,h5 { font-family: 'Syne', sans-serif; line-height: 1.25; color: var(--text-primary); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Focus / selection ────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection    { background: var(--gold-subtle); color: var(--text-primary); }

/* ── Utility ──────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-faint     { color: var(--text-faint); }
.text-gold      { color: var(--gold); }
.text-teal      { color: var(--accent-teal); }
.text-live      { color: var(--accent-live); }
.text-purple    { color: var(--accent-purple); }
.text-blue      { color: var(--accent-blue); }
.font-600       { font-weight: 600; }
.font-700       { font-weight: 700; }
.uppercase      { text-transform: uppercase; }
.letter-wide    { letter-spacing: 0.08em; }
.sr-only        { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:0.35} }
@keyframes fadeIn     { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer    { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes spin       { to{transform:rotate(360deg)} }

.pulse   { animation: pulse-live 1.6s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.26s ease both; }

/* ── Skeleton ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-float) 50%, var(--bg-elevated) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton-line       { height: 12px; border-radius: 4px; margin-bottom: 4px; }
.skeleton-line.short { width: 38%; }
.skeleton-line.med   { width: 62%; }
.skeleton-line.full  { width: 100%; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}