/* ==========================================================================
   Mentores Up! Steam — Design Tokens
   Mobile-first, Montserrat, light only
   ========================================================================== */

:root {
  /* ---- Brand: gradiente firma (magenta → naranja → amarillo) ---- */
  --brand-magenta: #E6007E;     /* Primario */
  --brand-magenta-600: #C20068;
  --brand-magenta-700: #9C0053;
  --brand-coral:   #F0593E;
  --brand-orange:  #F7941D;
  --brand-yellow:  #FFC627;
  --brand-navy:    #1B2A4E;     /* "MENTORES" del logo */

  --gradient-brand: linear-gradient(95deg, #E6007E 0%, #F0593E 45%, #F7941D 80%, #FFC627 100%);
  --gradient-brand-soft: linear-gradient(95deg, rgba(230,0,126,.08) 0%, rgba(247,148,29,.08) 60%, rgba(255,198,39,.08) 100%);
  --gradient-text: linear-gradient(95deg, #E6007E 0%, #F0593E 55%, #F7941D 100%);

  /* ---- Categorías de proyectos ---- */
  --cat-dreamers: #1FA73A;      /* verde */
  --cat-dreamers-bg: #E6F7EA;
  --cat-makers:   #F39200;      /* naranja */
  --cat-makers-bg: #FEF1DD;
  --cat-coders:   #1F3FD1;      /* azul */
  --cat-coders-bg: #E4E9FB;
  --cat-gamers:   #E5202B;      /* rojo */
  --cat-gamers-bg: #FBE4E5;

  /* ---- Etapas educativas ---- */
  --stage-juniors: #29B6F6;     /* azul claro */
  --stage-juniors-bg: #E5F6FD;
  --stage-cadetes: #9575CD;     /* lila */
  --stage-cadetes-bg: #EFEAF8;
  --stage-seniors: #6B7280;     /* gris */
  --stage-seniors-bg: #F1F2F4;

  /* ---- Neutros funcionales ---- */
  --ink-900: #0F172A;
  --ink-800: #1F2937;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* ---- Estados ---- */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger:  #DC2626;
  --danger-bg:  #FEE2E2;
  --info:    #2563EB;
  --info-bg: #DBEAFE;

  /* ---- Tipografía ---- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Espaciado (escala 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ---- Radios ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 8px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 20px 40px rgba(15,23,42,.12), 0 6px 12px rgba(15,23,42,.06);
  --shadow-brand: 0 12px 28px rgba(230,0,126,.28), 0 4px 8px rgba(247,148,29,.18);

  /* ---- Capas / motion ---- */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --app-max: 420px;             /* mobile-first contenedor */
  --app-pad: 20px;
  --tap: 44px;                  /* min touch target */
}

/* ---- Reset ligero ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
img { max-width: 100%; display: block; }