/* ═══════════════════════════════════════
   L2ZONE — CSS Variables & Reset
   ═══════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-deep: #080609;
  --bg-card: #0e0b12;
  --bg-card-hover: #141019;
  --bg-surface: #0c0a10;
  --bg-sidebar: #0a0810;

  /* Gold palette */
  --gold: #c9a84c;
  --gold-light: #e4c76b;
  --gold-dim: #8a7234;
  --gold-faint: rgba(201, 168, 76, 0.08);

  /* Red palette */
  --red: #8b2035;
  --red-glow: #c4304d;

  /* Text */
  --text-primary: #d4cfc6;
  --text-secondary: #7a7572;
  --text-muted: #4a4745;
  --text-highlight: #e8d48b;

  /* Borders */
  --border: #1e1a24;
  --border-gold: rgba(201, 168, 76, 0.18);

  /* Glows */
  --glow-gold: rgba(201, 168, 76, 0.08);
  --glow-red: rgba(196, 48, 77, 0.12);

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-body: 'Philosopher', sans-serif;
  --font-serif: 'Crimson Text', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --nav-height: 68px;
  --sidebar-width: 280px;
}


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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
}

::selection {
  background: var(--gold);
  color: var(--bg-deep);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}


/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }


/* ═══ NOISE OVERLAY ═══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity: .5;
}