@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Quicksand:wght@500;600;700&display=swap');

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

:root {
  --bg-dark: #1a1028;
  --bg-card: #2a1f3d;
  --bg-card-lighter: #352a4d;
  --accent-purple: #7c5cfc;
  --accent-purple-light: #9b7fff;
  --accent-purple-glow: rgba(124, 92, 252, 0.3);
  --accent-pink: #ff5c8a;
  --text-white: #f5f0ff;
  --text-muted: #a89bc2;
  --toolbar-bg: rgba(42, 31, 61, 0.95);
  --overlay-bg: rgba(15, 10, 25, 0.85);
  --page-bg: #ffffff;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-xl: 0 25px 60px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --progress-gradient: linear-gradient(90deg, #7c5cfc, #9b7fff, #c084fc, #f0abfc, #ff5c8a);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  background: var(--bg-dark);
  color: var(--text-white);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}