/* ============================================================
   VARIABLES & RESET — Neural Interface Design System
   ============================================================ */

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

:root {
  /* Surfaces */
  --surface-dim:                #131313;
  --surface:                    #131313;
  --surface-container-lowest:   #0e0e0e;
  --surface-container-low:      #1c1b1b;
  --surface-container:          #201f1f;
  --surface-container-high:     #2a2a2a;
  --surface-container-highest:  #353534;
  --surface-bright:             #3a3939;

  /* Primary — Cyan */
  --primary:                    #c3f5ff;
  --primary-container:          #00e5ff;
  --primary-dim:                rgba(0, 229, 255, 0.15);
  --on-primary:                 #00363d;

  /* Secondary — Purple */
  --secondary:                  #ecb1ff;
  --secondary-container:        #d05bff;
  --secondary-dim:              rgba(208, 91, 255, 0.12);

  /* Text */
  --on-surface:                 #e5e2e1;
  --on-surface-variant:         #bac9cc;

  /* Borders */
  --outline:                    #849396;
  --outline-variant:            #3b494c;
  --ghost-border:               rgba(59, 73, 76, 0.15);

  /* Semantic */
  --success:                    #00ff9c;
  --warning:                    #ffaa00;
  --error:                      #ff3344;

  /* Typography */
  --font-headline:              'Space Grotesk', sans-serif;
  --font-body:                  'Inter', sans-serif;

  /* Spacing */
  --hud-padding:                24px;
  --section-padding:            80px;
}

html {
  scroll-behavior: auto; /* Lenis handles smooth scroll */
}

body {
  background: var(--surface-dim);
  color: var(--on-surface);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--primary-container);
  color: var(--on-primary);
}