/* ═══════════════════════════════════════════════════════════
   AuralogicX — Design Tokens & Base Styles
   css/tokens.css
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colours ──────────────────────────────────────────── */
  --deep:       #03060f;
  --dark:       #060c1a;
  --navy:       #0a1228;
  --panel:      rgba(10,18,40,0.75);
  --cyan:       #00d4ff;
  --cyan-dim:   rgba(0,212,255,0.15);
  --violet:     #7c3aed;
  --violet-dim: rgba(124,58,237,0.18);
  --purple:     #9d4edd;
  --pink:       #c77dff;
  --white:      #f4f8ff;
  --muted:      #a8bde0;
  --border:     rgba(0,212,255,0.1);
  --border-v:   rgba(124,58,237,0.18);
  --glow-c:     rgba(0,212,255,0.18);
  --glow-v:     rgba(124,58,237,0.22);

  /* ── Typography ───────────────────────────────────────── */
  --ff-display: 'Oxanium', monospace;
  --ff-body:    'DM Sans', sans-serif;

  /* ── Motion & shape ───────────────────────────────────── */
  --ease:    cubic-bezier(.4,0,.2,1);
  --r:       12px;
  --r-lg:    20px;
  --r-xl:    28px;
}

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

html {
  background: #03060f; 
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--ff-body);
  background: transparent;
  color: var(--white);
  overflow-x: hidden;
  overflow-y: scroll;
  line-height: 1.65;
}

a    { text-decoration: none; color: inherit }
ul   { list-style: none }
img  { max-width: 100% }

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