/* ============================================================
   tokens.css — Design tokens base.
   Sistema visual: profesional, minimalista, paleta azul → verde.
   ============================================================ */

:root {
  /* ── Primarios (azul corporativo) ── */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* ── Secundarios (verde innovación) ── */
  --color-secondary-50:  #ECFDF5;
  --color-secondary-100: #D1FAE5;
  --color-secondary-200: #A7F3D0;
  --color-secondary-300: #6EE7B7;
  --color-secondary-400: #34D399;
  --color-secondary-500: #10B981;
  --color-secondary-600: #059669;
  --color-secondary-700: #047857;
  --color-secondary-800: #065F46;
  --color-secondary-900: #064E3B;

  /* ── Mid (teal — puente entre azul y verde) ── */
  --color-teal-400: #2DD4BF;
  --color-teal-500: #14B8A6;
  --color-teal-600: #0D9488;
  --color-teal-700: #0F766E;

  /* ── Neutrales ── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;

  /* ── Semánticos ── */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* ── Tipografía: Manrope (display + body) — moderna, geométrica, profesional ── */
  --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;
  --font-size-7xl:  4.5rem;

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

  --line-height-tight:    1.1;
  --line-height-snug:     1.3;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-tighter: -0.04em;

  /* ── Espaciado ── */
  --spacing-0:  0;
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-5:  1.25rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;

  /* ── Bordes y radios ── */
  --radius-none: 0;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Sombras minimalistas (más sutiles) ── */
  --shadow-xs:  0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm:  0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-md:  0 4px 8px -2px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg:  0 12px 20px -6px rgb(15 23 42 / 0.08), 0 6px 8px -4px rgb(15 23 42 / 0.04);
  --shadow-xl:  0 20px 28px -8px rgb(15 23 42 / 0.1), 0 8px 12px -6px rgb(15 23 42 / 0.06);
  --shadow-2xl: 0 28px 56px -12px rgb(15 23 42 / 0.18);

  --shadow-glow-blue:  0 0 0 4px rgb(59 130 246 / 0.18);
  --shadow-glow-green: 0 0 0 4px rgb(16 185 129 / 0.18);

  /* ── Transiciones ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   380ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-theme:  300ms ease;

  /* ── Z-index ── */
  --z-base:    1;
  --z-dropdown: 50;
  --z-navbar:   100;
  --z-chatbot:  150;
  --z-modal:    200;
  --z-tooltip:  300;
  --z-toast:    400;

  /* ── Layout ── */
  --container-max-width: 1240px;
  --container-padding-x: var(--spacing-6);
  --section-padding-y: var(--spacing-24);
  --navbar-height: 68px;
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--spacing-16);
    --container-padding-x: var(--spacing-4);
    --font-size-6xl: 2.5rem;
    --font-size-5xl: 2.125rem;
    --font-size-4xl: 1.75rem;
  }
}