/* =====================================================================
   IzyPagos · Design Tokens (CSS Custom Properties)
   Fuente única de verdad para diseñadores y desarrolladores.
   Todo color literal del producto debe resolverse contra estas variables.
   v1.0 · 2026
   ===================================================================== */

:root {
  /* ---- Marca ------------------------------------------------------- */
  --izy-azul-50:  #EAF1FF;
  --izy-azul-100: #D6E4FF;
  --izy-azul-300: #7FAAFF;
  --izy-azul-500: #3D82FF;   /* fill claro / hover-up            */
  --izy-azul-600: #1466FF;   /* PRIMARIO — botones, marca        */
  --izy-azul-700: #0B4ED1;   /* texto/enlace accesible en blanco */
  --izy-azul-900: #0A2A66;   /* titulares de confianza           */

  --izy-cian-50:  #E4FAFF;
  --izy-cian-500: #17C1E8;   /* SECUNDARIO — innovación/rapidez  */
  --izy-cian-700: #0E7C97;   /* texto cian accesible             */

  --izy-noche:    #070C18;   /* base de tema oscuro              */

  /* ---- Neutros (Tinta) -------------------------------------------- */
  --tinta-900: #0B1524;      /* texto principal                  */
  --tinta-700: #334155;      /* texto secundario                 */
  --tinta-500: #64748B;      /* apoyo / placeholder              */
  --tinta-300: #CBD5E1;      /* borde fuerte / deshabilitado     */
  --tinta-200: #E2E8F0;      /* borde hairline                   */
  --tinta-100: #F1F5F9;      /* superficie alterna               */
  --nube:      #F6F8FC;      /* fondo de página                  */
  --blanco:    #FFFFFF;

  /* ---- Semánticos -------------------------------------------------- */
  --exito-500:  #12B76A;  --exito-700: #067647;  --exito-50: #E7F8F0; /* Pago aprobado */
  --alerta-500: #F79009;  --alerta-700: #B54708; --alerta-50: #FEF3E2;
  --error-500:  #F04438;  --error-700: #B42318;  --error-50: #FEECEB; /* Rechazo/declinado */
  --info-500:   var(--izy-azul-600); --info-50: var(--izy-azul-50);

  /* ---- Roles semánticos (tema claro por defecto) ------------------ */
  --bg:            var(--nube);
  --surface:       var(--blanco);
  --surface-alt:   var(--tinta-100);
  --fg:            var(--tinta-900);
  --fg-muted:      var(--tinta-500);
  --border:        var(--tinta-200);
  --border-strong: var(--tinta-300);
  --accent:        var(--izy-azul-600);
  --accent-ink:    var(--izy-azul-700);
  --focus-ring:    #3D82FF;

  /* ---- Gradiente de marca (uso restringido) ----------------------- */
  /* SOLO isotipo + momento "aprobado". Nunca fondo genérico de héroe. */
  --grad-marca: linear-gradient(135deg, var(--izy-azul-600) 0%, var(--izy-cian-500) 100%);

  /* ---- Tipografía -------------------------------------------------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;

  --fs-display: clamp(2.75rem, 1.6rem + 4vw, 4.5rem); /* 44 → 72 */
  --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem);         /* 32 → 48 */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);       /* 24 → 32 */
  --fs-h3: 1.375rem;                                  /* 22 */
  --fs-body-lg: 1.125rem;                             /* 18 */
  --fs-body: 1rem;                                    /* 16 */
  --fs-sm: 0.875rem;                                  /* 14 */
  --fs-caption: 0.75rem;                              /* 12 */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-caps: 0.08em;      /* MAYÚSCULAS: tracking obligatorio */
  --ls-label: 0.02em;

  --fw-read: 400;
  --fw-emph: 500;
  --fw-announce: 600;
  --fw-display: 700;

  /* ---- Espaciado (grid base 8px) ---------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---- Radios ------------------------------------------------------ */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Sombras / elevación ---------------------------------------- */
  --shadow-1: 0 1px 2px rgba(11,21,36,.06), 0 1px 1px rgba(11,21,36,.04);
  --shadow-2: 0 4px 12px rgba(11,21,36,.08);
  --shadow-3: 0 12px 28px rgba(11,21,36,.12);
  --shadow-focus: 0 0 0 3px rgba(61,130,255,.45);

  /* ---- Iconografía ------------------------------------------------- */
  --icon-stroke: 1.75px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

  /* ---- Layout ------------------------------------------------------ */
  --container: 1200px;
  --measure: 68ch;
  --dur-fast: .12s; --dur: .2s; --dur-slow: .4s;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---- Tema oscuro (app, dashboard, checkout nocturno) -------------- */
:root[data-theme="dark"], .theme-dark {
  --bg:            var(--izy-noche);
  --surface:       #0E1526;
  --surface-alt:   #131C31;
  --fg:            #EAF0FA;
  --fg-muted:      #93A1B8;
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --accent:        var(--izy-azul-500);
  --accent-ink:    #7FAAFF;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 6px 16px rgba(0,0,0,.55);
  --shadow-3: 0 16px 40px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}