/*──────────────────────────────────────────────────────
  1. RESET & BASE TYPOGRAPHY
──────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background: #f9fafb;
  color: #1f2937;
  overflow-x: hidden;
}

/*──────────────────────────────────────────────────────
  2. DESIGN TOKENS
──────────────────────────────────────────────────────*/
:root {
  --accent:        #7c3aed;
  --accent-dark:   #6366f1;
  --accent-light:  #ede9fe;
  --bg-zinc-800:   #27272A;
  --bg-zinc-600:   #52525B;
  --muted-text:    #4b5563;
  --bg-card:       #ffffff;
  --overlay-bg:    rgba(0, 0, 0, 0.5);
  --radius:        1rem;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      2rem;
}

/*──────────────────────────────────────────────────────
  3. GLOBAL UTILITIES
──────────────────────────────────────────────────────*/
.flex            { display: flex; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.text-center     { text-align: center; }
.hidden          { display: none !important; }