/* ============================================================
   tokens.css  —  Design Tokens
   ============================================================
   All CSS custom properties, colour palette, font stack
   and base reset live here.

   HOW TO CUSTOMISE:
   • Change --lime / --pink / --orange / --yellow for brand colours
   • Swap the Google Fonts @import for your own typefaces
   • Adjust --black / --dark / --grey for background tones

   This is the ONLY file you need to touch for a rebrand.
   ============================================================ */

:root {
  --black: #0A0A0A;
  --dark: #111111;
  --dark2: #1A1A1A;
  --grey: #909090;
  --white: #FFFFFF;
  --lime: #96FA00;
  --pink: #FA50DC;
  --orange: #FF7300;
  --yellow: #FFF000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Custom scrollbars ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,250,0,0.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
}