/* ============================================
   base.css — Variables, reset y tipografía
   Toca este archivo solo para cambiar colores
   o fuentes globales.
   ============================================ */

:root {
  /* Colores principales */
  --naranja:        #FF6B35;
  --naranja-light:  #FFF0EB;
  --naranja-mid:    rgba(255,107,53,0.25);
  --amarillo:       #FFD166;
  --amarillo-light: #FFFBF0;
  --verde:          #06D6A0;
  --verde-light:    #E8FDF7;
  --azul:           #118AB2;
  --morado:         #7B5EA7;

  /* Texto */
  --texto:  #1C1C2E;
  --muted:  #6B7280;

  /* Fondos */
  --bg:          #FFFBF7;
  --sidebar-bg:  #FFF8F5;
  --white:       #FFFFFF;

  /* Bordes */
  --border:      rgba(255,107,53,0.12);
  --border-soft: rgba(0,0,0,0.07);

  /* Editor oscuro */
  --editor-bg:     #0d1117;
  --editor-border: rgba(255,255,255,0.06);
  --editor-ln:     #3d444d;
  --editor-text:   #e6edf3;
  --tabs-bg:       #010409;

  /* Radios */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-pill: 100px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-naranja: 0 4px 14px rgba(255,107,53,0.3);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--texto);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--naranja-mid); border-radius: 4px; }

/* Animaciones base */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}