/* ==========================================================================
   TOKENS — Identidad visual (Tarea 2)
   Paleta oficial 60-30-10 · Tipografia Inter + IBM Plex Sans
   ========================================================================== */

:root {
  /* --- Paleta base (regla 60-30-10) ------------------------------------- */
  /* 60% — Superficies y fondo. Nunca negro puro. */
  --c-base: #0d0428;
  --c-base-800: #140a33;
  --c-base-700: #1b1040;
  --c-base-600: #24184f;

  /* 30% — Color de marca. Estructura, bordes activos, superficies de apoyo. */
  --c-brand: #8519f7;
  --c-brand-soft: rgba(133, 25, 247, 0.14);
  --c-brand-line: rgba(133, 25, 247, 0.34);

  /* 10% — Acento. Solo llamadas a la accion y realces puntuales. */
  --c-accent: #a057ff;
  --c-accent-soft: rgba(160, 87, 255, 0.16);

  /* --- Neutros derivados ------------------------------------------------ */
  --c-text: #f4f1fb;
  --c-text-muted: #a79fc4;
  --c-text-dim: #7a7196;
  --c-line: rgba(244, 241, 251, 0.1);
  --c-line-strong: rgba(244, 241, 251, 0.18);

  /* --- Estados ----------------------------------------------------------- */
  --c-success: #3ddc97;
  --c-error: #ff6b8a;

  /* --- Superficies ------------------------------------------------------- */
  --surface: rgba(244, 241, 251, 0.032);
  --surface-hover: rgba(244, 241, 251, 0.055);
  --surface-solid: var(--c-base-800);

  /* --- Tipografia -------------------------------------------------------- */
  --font-title: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida — jerarquia exagerada (tendencia: tipografia expresiva) */
  --fs-display: clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.75vw, 1.45rem);
  --fs-body: clamp(0.975rem, 0.94rem + 0.18vw, 1.075rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  --tracking-tight: -0.035em;
  --tracking-wide: 0.16em;

  /* --- Espaciado --------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --shell: 1200px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* --- Formas ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(5, 1, 16, 0.35);
  --shadow-md: 0 14px 34px rgba(5, 1, 16, 0.45);
  --shadow-lg: 0 28px 70px rgba(5, 1, 16, 0.6);
  --glow-brand: 0 0 0 1px var(--c-brand-line), 0 16px 40px rgba(133, 25, 247, 0.24);

  /* --- Movimiento — micro-interacciones sobrias -------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* --- Capas ------------------------------------------------------------- */
  --z-sticky: 100;
  --z-float: 200;
  --z-modal: 300;
}

/* Respeta la preferencia del sistema: sin movimiento, sin excepciones. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}