:root {
  /* BACKGROUNDS */
  --color-background: #020617;
  --color-surface: #0f172a;
  --color-surface-variant: #1e293b;
  --color-surface-container-low: #0b0f1a;
  --color-surface-container-high: #131a2b;

  /* BRANDING */
  --color-primary: #6366F1;
  --color-primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --color-accent: #c084fc;
  --color-secondary: #94a3b8;

  /* TEXT */
  --color-on-background: #f8fafc;
  --color-on-surface: #f1f5f9;
  --color-on-surface-variant: #94a3b8;

  /* OUTLINES */
  --color-outline: #334155;
  --color-outline-variant: #1e293b;

  /* SPACING & RADIUS */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
}

/* GLOBAL RESET */
body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  scroll-behavior: smooth;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* UTILITY CLASSES */
.btn-primary { 
  background: var(--color-primary-gradient); 
  box-shadow: 0 4px 15px -1px rgba(99,102,241,0.3); 
  transition: transform 0.25s ease, box-shadow 0.25s ease; 
  border-radius: var(--radius-2xl);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { 
  box-shadow: 0 12px 28px -1px rgba(99,102,241,0.5); 
  transform: translateY(-2px); 
}
.btn-primary:active { transform: scale(0.97); }

.glass-card { 
  background: rgba(15,23,42,0.6); 
  backdrop-filter: blur(12px); 
  border: 1px solid rgba(255,255,255,0.05); 
  border-radius: var(--radius-2xl);
}

.gradient-text { 
  background: linear-gradient(to right, #818cf8, #c084fc); 
  background-clip: text; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}