/* ============================================================
   Josué Marketing — Design Tokens
   Identidad: autoridad académica (oscuros índigo) + energía
   emprendedora (gradiente violeta→azul). "Una nueva forma de aprender".
   Todo el sistema visual se construye sobre estas variables.
   ============================================================ */

:root {
  /* ── Colores de marca ──────────────────────────────────── */
  --c-violeta:        #7c3aed;   /* primario */
  --c-violeta-claro:  #8b5cf6;
  --c-violeta-oscuro: #6d28d9;
  --c-azul:           #3b82f6;   /* secundario */
  --c-azul-claro:     #60a5fa;
  --c-magenta:        #c026d3;   /* acento (anillo del logo) */

  /* Gradiente de marca (botones, acentos, encabezados hero) */
  --grad-marca: linear-gradient(135deg, var(--c-violeta) 0%, var(--c-azul) 100%);
  --grad-anillo: linear-gradient(135deg, var(--c-magenta) 0%, var(--c-violeta) 45%, var(--c-azul) 100%);

  /* ── Superficies / fondos ──────────────────────────────── */
  --c-fondo:        #ffffff;     /* fondo general claro */
  --c-fondo-suave:  #f5f4fb;     /* secciones alternas */
  --c-superficie:   #ffffff;     /* tarjetas */
  --c-borde:        #e6e3f1;

  /* Oscuros de marca (hero, footer, navbar admin) */
  --c-noche:        #1b1633;     /* índigo profundo (fondo del logo) */
  --c-noche-2:      #221b3f;
  --c-noche-3:      #2d2452;

  /* ── Texto ─────────────────────────────────────────────── */
  --c-texto:        #1f1a35;     /* texto principal */
  --c-texto-suave:  #5b5570;     /* secundario */
  --c-texto-tenue:  #8b85a0;     /* terciario / metadatos */
  --c-texto-claro:  #f3f1fb;     /* sobre fondos oscuros */

  /* ── Estados ───────────────────────────────────────────── */
  --c-exito:   #16a34a;
  --c-exito-bg:#dcfce7;
  --c-error:   #dc2626;
  --c-error-bg:#fee2e2;
  --c-aviso:   #d97706;
  --c-aviso-bg:#fef3c7;
  --c-info:    var(--c-azul);
  --c-info-bg: #dbeafe;

  /* ── Tipografía ────────────────────────────────────────── */
  /* Display para titulares; texto para cuerpo. Self-hosted/sistema. */
  --f-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-texto:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  3rem;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;
  --peso-black:  800;

  /* ── Escala de espaciado (base 4px) ────────────────────── */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* ── Radios y sombras ──────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  --s-sm: 0 1px 2px rgba(27, 22, 51, 0.06);
  --s-md: 0 4px 16px rgba(27, 22, 51, 0.08);
  --s-lg: 0 12px 32px rgba(27, 22, 51, 0.12);
  --s-violeta: 0 8px 24px rgba(124, 58, 237, 0.28);

  /* ── Layout ────────────────────────────────────────────── */
  --ancho-max: 1160px;
  --ancho-texto: 720px;       /* lectura cómoda para blog */
  --alto-navbar: 68px;

  /* ── Transiciones ──────────────────────────────────────── */
  --trans: 180ms ease;
}

/* Respeta la preferencia de movimiento reducido del usuario. */
@media (prefers-reduced-motion: reduce) {
  :root { --trans: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}