/* ============================================================
   abaku.mx — DESIGN TOKENS v2
   Única fuente de verdad visual. Ver DESIGN.md para las guías.

   Capas:
     1. Primitivos  (--violet-500…)  → nunca se usan directo en componentes
     2. Semánticos  (--bg, --text…)  → lo que usan los componentes
     3. Componente  (--btn-*, …)     → casos puntuales

   Temas: dark (default) y light vía  html[data-theme="light"].

   Breakpoints (referencia; las media queries no aceptan variables):
     --bp-sm:  480px   móvil grande
     --bp-md:  768px   tablet
     --bp-lg:  1024px  laptop
     --bp-xl:  1240px  desktop (max del container)
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVOS ---------- */
  /* Marca: violeta ABAKU */
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;

  /* Acentos */
  --cyan-400:  #22d3ee;
  --pink-400:  #f472b6;
  --amber-300: #fde68a;
  --green-400: #34d399;
  --red-400:   #f87171;
  --blue-400:  #60a5fa;

  /* Neutros fríos (base violeta) */
  --ink-950: #0b0718;
  --ink-900: #0d0820;
  --ink-800: #15102e;
  --ink-700: #1a1232;
  --ink-100: #ebe5ff;
  --paper-0:   #ffffff;
  --paper-50:  #fafaff;
  --paper-100: #f3f0ff;

  /* ---------- 2. SEMÁNTICOS · tema oscuro (default) ---------- */
  --bg:        var(--ink-900);
  --bg-2:      var(--ink-800);
  --bg-3:      var(--ink-700);
  --surface:   rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.08);
  --surface-3: rgba(255,255,255,.12);
  --border:    rgba(167,139,250,.18);
  --border-2:  rgba(167,139,250,.32);

  --text:       var(--ink-100);
  --text-soft:  rgba(235,229,255,.78);
  --text-mute:  rgba(235,229,255,.55);
  --text-inverse: var(--ink-900);

  --primary:    var(--violet-500);
  --primary-2:  #a855f7;
  --primary-3:  var(--violet-300);
  --primary-contrast: #ffffff;
  --accent:     var(--cyan-400);

  --ok:    var(--green-400);
  --warn:  var(--amber-300);
  --bad:   var(--red-400);
  --info:  var(--blue-400);

  --grad-1:    linear-gradient(135deg, #a855f7 0%, var(--violet-700) 60%, #4338ca 100%);
  --grad-text: linear-gradient(120deg, var(--violet-300) 0%, var(--pink-400) 50%, var(--amber-300) 100%);
  --grad-hero: radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.30), transparent 60%),
               radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.14), transparent 60%);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(109,40,217,.22);
  --shadow-2: 0 30px 80px rgba(0,0,0,.55);
  --focus-ring: 0 0 0 3px rgba(139,92,246,.45);

  /* ---------- TIPOGRAFÍA ---------- */
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, monospace;

  /* Escala fluida (móvil → desktop) */
  --fs-display: clamp(2.1rem, 1.2rem + 4.2vw, 4rem);      /* h1 hero        */
  --fs-h2:      clamp(1.65rem, 1.1rem + 2.4vw, 2.6rem);   /* títulos sección */
  --fs-h3:      clamp(1.1rem, 1rem + .5vw, 1.25rem);
  --fs-lead:    clamp(1.05rem, 1rem + .3vw, 1.15rem);
  --fs-body:    1rem;        /* 16px */
  --fs-sm:      .85rem;      /* ~13.6px */
  --fs-xs:      .75rem;      /* 12px  */

  --lh-tight: 1.08;
  --lh-head:  1.15;
  --lh-body:  1.6;

  --tracking-tight: -0.022em;
  --tracking-caps:  0.12em;

  /* ---------- ESPACIADO (base 4px) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Sección fluida y container */
  --section-y: clamp(56px, 4rem + 3vw, 96px);
  --container: 1200px;
  --container-pad: clamp(16px, 4vw, 24px);

  /* ---------- FORMA Y MOVIMIENTO ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s;
  --t-med:  .25s;
  --t-slow: .45s;

  /* ---------- CAPAS (z-index) ---------- */
  --z-nav:     50;
  --z-modal:   100;
  --z-toast:   200;
  --z-overlay: 9999;
}

/* ---------- 2b. SEMÁNTICOS · tema claro ---------- */
html[data-theme="light"] {
  --bg:        var(--paper-50);
  --bg-2:      var(--paper-100);
  --bg-3:      var(--paper-0);
  --surface:   rgba(109,40,217,.045);
  --surface-2: rgba(109,40,217,.09);
  --surface-3: rgba(109,40,217,.14);
  --border:    rgba(109,40,217,.16);
  --border-2:  rgba(109,40,217,.30);

  --text:       #1a1232;
  --text-soft:  rgba(26,18,50,.76);
  --text-mute:  rgba(26,18,50,.55);
  --text-inverse: #ffffff;

  --primary:   var(--violet-700);
  --primary-2: var(--violet-600);
  --primary-3: var(--violet-500);

  --grad-text: linear-gradient(120deg, var(--violet-700) 0%, #db2777 55%, #b45309 100%);
  --grad-hero: radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.16), transparent 60%),
               radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.09), transparent 60%);

  --shadow-1: 0 1px 2px rgba(20,10,60,.06), 0 8px 30px rgba(109,40,217,.10);
  --shadow-2: 0 30px 80px rgba(50,30,120,.16);
  --focus-ring: 0 0 0 3px rgba(109,40,217,.35);
}

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}