/* ============================================================
   TOKENS.CSS — Sistema de diseño: Nicolas Agudelo
   Consultor Salesforce & Automatización Avanzada
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700;800&display=swap');

:root {

  /* --------------------------------------------------
     PALETA DE COLOR
     -------------------------------------------------- */

  /* Fondos */
  --color-bg-base:       #080F1E;   /* azul noche profundo */
  --color-bg-elevated:   #0D1829;   /* fondo de secciones alternadas */
  --color-bg-card:       #101E35;   /* cards y paneles */
  --color-bg-card-hover: #132240;   /* hover en cards */
  --color-border:        #1C2E4A;   /* bordes sutiles */
  --color-border-accent: #2563EB33; /* borde con tinte accent */

  /* Accent primario — Azul eléctrico Salesforce */
  --color-accent:        #3B82F6;
  --color-accent-hover:  #2563EB;
  --color-accent-light:  #3B82F614; /* fondo translúcido accent */
  --color-accent-glow:   #3B82F640; /* glow para sombras */

  /* Accent secundario — Verde Python/salud */
  --color-green:         #10B981;
  --color-green-hover:   #059669;
  --color-green-light:   #10B98114;

  /* Accent terciario — Púrpura n8n */
  --color-purple:        #8B5CF6;
  --color-purple-light:  #8B5CF614;

  /* Texto */
  --color-text-primary:   #F0F6FF;  /* blanco azulado suave */
  --color-text-secondary: #8BA3C7;  /* gris azulado */
  --color-text-muted:     #4D6A8A;  /* texto desactivado */
  --color-text-inverse:   #080F1E;  /* texto sobre fondos claros */

  /* Feedback */
  --color-success: #10B981;
  --color-error:   #EF4444;
  --color-warning: #F59E0B;

  /* Gradientes */
  --gradient-hero:    linear-gradient(135deg, #080F1E 0%, #0F1F3D 50%, #0A1628 100%);
  --gradient-accent:  linear-gradient(135deg, #3B82F6, #2563EB);
  --gradient-card:    linear-gradient(145deg, #101E35, #0D1829);
  --gradient-cta:     linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --gradient-text:    linear-gradient(135deg, #60A5FA, #3B82F6, #8B5CF6);

  /* --------------------------------------------------
     TIPOGRAFÍA
     -------------------------------------------------- */

  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Escala modular — clamp(min, preferred, max) */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);   /* 11-12px */
  --text-sm:   clamp(0.813rem, 1.8vw, 0.875rem); /* 13-14px */
  --text-base: clamp(0.938rem, 2vw, 1rem);        /* 15-16px */
  --text-lg:   clamp(1.063rem, 2.2vw, 1.125rem); /* 17-18px */
  --text-xl:   clamp(1.188rem, 2.5vw, 1.25rem);  /* 19-20px */
  --text-2xl:  clamp(1.375rem, 3vw, 1.5rem);     /* 22-24px */
  --text-3xl:  clamp(1.625rem, 4vw, 2rem);        /* 26-32px */
  --text-4xl:  clamp(2rem, 5vw, 2.75rem);         /* 32-44px */
  --text-5xl:  clamp(2.5rem, 6.5vw, 3.75rem);    /* 40-60px */
  --text-6xl:  clamp(3rem, 8vw, 5rem);            /* 48-80px */

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* --------------------------------------------------
     ESPACIADO — sistema de 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 */

  /* --------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------- */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl:40px;
  --radius-full: 9999px;

  /* --------------------------------------------------
     SOMBRAS
     -------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.5);
  --shadow-accent: 0 4px 20px var(--color-accent-glow);
  --shadow-accent-lg: 0 8px 40px var(--color-accent-glow);

  /* Glow interno para cards */
  --glow-card: inset 0 1px 0 rgba(255,255,255,0.05);

  /* --------------------------------------------------
     TRANSICIONES
     -------------------------------------------------- */

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------
     Z-INDEX
     -------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;

  /* --------------------------------------------------
     LAYOUT
     -------------------------------------------------- */

  --container-max:  1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --nav-height: 72px;

  /* --------------------------------------------------
     GLASSMORPHISM
     -------------------------------------------------- */

  --glass-bg:     rgba(13, 24, 41, 0.7);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur:   blur(16px);
}