/* ===============================================
   DROPSTATION · DESIGN TOKENS
   Variables CSS, reset, fuentes
   =============================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Unbounded:wght@400;600;700;800;900&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ── Colores base ── */
  --bg:         #0a0a0a;
  --bg-2:       #111113;
  --surface:    #17171a;
  --surface-2: #1f1f23;
  --border:     #27272a;
  --border-hover: #3f3f46;

  --text:       #fafafa;
  --text-dim:   #a1a1aa;
  --text-mute:  #71717a;

  /* ── Brand ── */
  --purple:       #8B5CF6;
  --purple-light: #A78BFA;
  --purple-dark:  #6D28D9;
  --purple-glow:  rgba(139,92,246,.4);

  --green:  #22c55e;
  --yellow: #fbbf24;
  --red:    #ef4444;
  --blue:   #3b82f6;

  /* ── Gradientes ── */
  --grad-purple: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --grad-text:   linear-gradient(90deg, #fff, #A78BFA, #fff);

  /* ── Tipografía ── */
  --font-display: 'Unbounded', system-ui, -apple-system, sans-serif;
  --font-hero:    'Chakra Petch', 'Unbounded', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.7);
  --shadow-glow: 0 0 40px -10px var(--purple-glow);

  /* ── Radios ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* ===============================================
   RESET
   =============================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

body.lock { overflow: hidden; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

img, video {
  max-width: 100%;
  display: block;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

::selection {
  background: var(--purple);
  color: #fff;
}

/* ===============================================
   SCROLLBAR
   =============================================== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ===============================================
   ANIMACIONES COMUNES
   =============================================== */

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin { animation: spin 0.8s linear infinite; }