/* ==========================================================================
   variables.css — Tokens de diseno del sistema Payzum / Multi Wallet
   Paleta, tipografia, espaciado, sombras, glassmorphism, z-index, etc.
   ========================================================================== */

:root {
  /* --- Colores principales ------------------------------------------------ */
  --color-primary:        #26A17B;
  --color-primary-dark:   #1E8A68;
  --color-primary-light:  #2FBFA0;
  --color-accent:         #627EEA;
  --color-accent-dark:    #4A6BD6;
  --color-accent-light:   #7B93EE;

  /* --- Superficies y fondos ---------------------------------------------- */
  --color-bg:             #0A0E17;
  --color-surface:        #111827;
  --color-surface-hover:  #1F2937;
  --color-surface-active: #374151;

  /* --- Texto ------------------------------------------------------------- */
  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary:  #6B7280;
  --color-text-inverse:   #111827;

  /* --- Bordes ------------------------------------------------------------ */
  --color-border:         #1F2937;
  --color-border-light:   rgba(255, 255, 255, 0.06);
  --color-border-strong:  #374151;

  /* --- Estados semanticos ------------------------------------------------ */
  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;

  /* --- Gradientes -------------------------------------------------------- */
  --gradient-primary:     linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-primary-rev: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
  --gradient-cta:         linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
  --gradient-text:        linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%);
  --gradient-surface:     linear-gradient(180deg, rgba(17, 24, 39, 0.8) 0%, rgba(10, 14, 23, 0.95) 100%);
  --gradient-conic:       conic-gradient(from 0deg, var(--color-primary), var(--color-accent), var(--color-primary-light), var(--color-primary));

  /* --- Tipografia — escala fluida (clamp) -------------------------------- */
  --font-family-heading:  'Space Grotesk', system-ui, sans-serif;
  --font-family-body:     'Inter', system-ui, sans-serif;
  --font-family-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Tamanos fluidos: min — preferido — max */
  --font-size-hero:       clamp(2.5rem,  5vw + 1rem, 4.5rem);   /* h1 hero */
  --font-size-h1:         clamp(2rem,    4vw + 0.5rem, 3.5rem);
  --font-size-h2:         clamp(1.75rem, 3vw + 0.5rem, 3rem);
  --font-size-h3:         clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --font-size-h4:         clamp(1.1rem,  1.5vw + 0.25rem, 1.35rem);
  --font-size-lg:         clamp(1.05rem, 1.2vw + 0.15rem, 1.2rem);
  --font-size-base:       clamp(0.95rem, 1vw + 0.1rem, 1.05rem);
  --font-size-sm:         clamp(0.8rem,  0.9vw + 0.1rem, 0.875rem);
  --font-size-xs:         clamp(0.7rem,  0.8vw + 0.05rem, 0.75rem);

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:  0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-caps:  0.1em;

  /* --- Espaciado (base 4px) ---------------------------------------------- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Bordes redondeados ------------------------------------------------ */
  --radius-sm:    0.25rem;   /* 4px  */
  --radius-md:    0.5rem;    /* 8px  */
  --radius-lg:    0.75rem;   /* 12px */
  --radius-xl:    1rem;      /* 16px */
  --radius-2xl:   1.5rem;    /* 24px */
  --radius-full:  9999px;    /* pill */

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 20px rgba(38, 161, 123, 0.3);
  --shadow-glow-accent: 0 0 20px rgba(98, 126, 234, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* --- Transiciones ------------------------------------------------------ */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);

  /* --- Glassmorphism ----------------------------------------------------- */
  --glass-bg:           rgba(17, 24, 39, 0.6);
  --glass-bg-light:     rgba(17, 24, 39, 0.4);
  --glass-bg-strong:    rgba(17, 24, 39, 0.8);
  --glass-blur:         16px;
  --glass-blur-strong:  24px;
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-top:   rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-shine:        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);

  /* --- Z-index (capas predecibles) --------------------------------------- */
  --z-behind:       -1;
  --z-base:         0;
  --z-dropdown:     10;
  --z-sticky:       20;
  --z-navbar:       30;
  --z-overlay:      40;
  --z-modal:        50;
  --z-toast:        60;
  --z-tooltip:      70;

  /* --- Contenedores ------------------------------------------------------ */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;
  --container-pad:  var(--space-6);  /* padding lateral del contenedor */
}

/* ==========================================================================
   Modo claro — se activa con [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {
  --color-bg:             #F9FAFB;
  --color-surface:        #FFFFFF;
  --color-surface-hover:  #F3F4F6;
  --color-surface-active: #E5E7EB;

  --color-text-primary:   #111827;
  --color-text-secondary: #4B5563;
  --color-text-tertiary:  #6B7280;
  --color-text-inverse:   #F9FAFB;

  --color-border:         #E5E7EB;
  --color-border-light:   rgba(0, 0, 0, 0.06);
  --color-border-strong:  #D1D5DB;

  /* Sombras mas suaves en modo claro */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-glow:  0 0 20px rgba(38, 161, 123, 0.15);
  --shadow-glow-accent: 0 0 20px rgba(98, 126, 234, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Glassmorphism en modo claro */
  --glass-bg:           rgba(255, 255, 255, 0.7);
  --glass-bg-light:     rgba(255, 255, 255, 0.5);
  --glass-bg-strong:    rgba(255, 255, 255, 0.9);
  --glass-border:       rgba(0, 0, 0, 0.06);
  --glass-border-top:   rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.12);
  --glass-shine:        linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);

  /* Gradiente de superficie invertido */
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(249,250,251,0.95) 100%);
}