/* ═══════════════════════════════════════════════════════════════════════════
   GROWTH IA — DESIGN TOKENS
   Sistema de diseño unificado para todas las páginas del producto.
   Fuente única de verdad para colores, tipografía, espaciado y efectos.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMITIVE COLORS ── */
  --color-black:     #000000;
  --color-white:     #ffffff;
  --color-cyan-50:   #ecfeff;
  --color-cyan-100:  #cffafe;
  --color-cyan-200:  #a5f3fc;
  --color-cyan-300:  #67e8f9;
  --color-cyan-400:  #22d3ee;
  --color-cyan-500:  #06B6D4;
  --color-cyan-600:  #0891b2;
  --color-cyan-700:  #0e7490;
  --color-green-400: #4ade80;
  --color-green-500: #10B981;
  --color-green-600: #059669;
  --color-red-300:   #fca5a5;
  --color-red-400:   #f87171;
  --color-red-500:   #EF4444;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #F59E0B;
  --color-purple-300:#c4b5fd;
  --color-purple-400:#a78bfa;
  --color-purple-500:#8b5cf6;
  --color-gray-50:   #f9fafb;
  --color-gray-100:  #f3f4f6;
  --color-gray-200:  #e5e7eb;
  --color-gray-300:  #d1d5db;
  --color-gray-400:  #9CA3AF;
  --color-gray-500:  #6B7280;
  --color-gray-600:  #4B5563;
  --color-gray-700:  #374151;
  --color-gray-800:  #1f2937;
  --color-gray-900:  #111827;

  /* ── SEMANTIC SURFACES ── */
  --bg:              #000000;
  --bg-elevated:     #0a0a0a;
  --bg-card:         #0d0d0d;
  --bg-input:        #0e0e0e;
  --bg-overlay:      rgba(0, 0, 0, 0.85);
  --surface:         rgba(255, 255, 255, 0.02);
  --surface-hover:   rgba(255, 255, 255, 0.04);
  --surface-active:  rgba(255, 255, 255, 0.06);

  /* ── SEMANTIC BORDERS ── */
  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(255, 255, 255, 0.12);
  --border-focus:    rgba(6, 182, 212, 0.55);
  --border-accent:   rgba(6, 182, 212, 0.2);

  /* ── SEMANTIC TEXT ── */
  --text-primary:    #e2e2e2;
  --text-secondary:  #9CA3AF;
  --text-tertiary:   #868F9C;
  --text-disabled:   #5C6370;
  --text-inverse:    #000000;
  --text-on-accent:  #000000;

  /* ── BRAND / ACCENT ── */
  --accent:          #06B6D4;
  --accent-hover:    #22d3ee;
  --accent-muted:    rgba(6, 182, 212, 0.1);
  --accent-bg:       rgba(6, 182, 212, 0.08);
  --accent-border:   rgba(6, 182, 212, 0.2);
  --accent-glow:     rgba(6, 182, 212, 0.25);

  /* ── STATUS COLORS ── */
  --success:         #10B981;
  --success-muted:   rgba(16, 185, 129, 0.15);
  --success-border:  rgba(16, 185, 129, 0.2);
  --success-text:    #34d399;

  --warning:         #F59E0B;
  --warning-muted:   rgba(245, 158, 11, 0.12);
  --warning-border:  rgba(245, 158, 11, 0.2);
  --warning-text:    #fcd34d;

  --danger:          #EF4444;
  --danger-muted:    rgba(239, 68, 68, 0.12);
  --danger-border:   rgba(239, 68, 68, 0.2);
  --danger-text:     #fca5a5;

  --info:            #8b5cf6;
  --info-muted:      rgba(139, 92, 246, 0.12);
  --info-border:     rgba(139, 92, 246, 0.25);
  --info-text:       #c4b5fd;

  /* ── TYPOGRAPHY ── */
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'Space Mono', 'SF Mono', 'Cascadia Code', monospace;

  --text-xs:         0.6875rem;   /* 11px */
  --text-sm:         0.8125rem;   /* 13px */
  --text-base:       0.875rem;    /* 14px */
  --text-md:         0.9375rem;   /* 15px */
  --text-lg:         1.0625rem;   /* 17px */
  --text-xl:         1.25rem;     /* 20px */
  --text-2xl:        1.5rem;      /* 24px */
  --text-3xl:        1.875rem;    /* 30px */
  --text-4xl:        2.25rem;     /* 36px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.04em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.1em;

  /* ── SPACING SCALE ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 40px 100px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 20px var(--accent-glow);
  --shadow-accent-lg: 0 4px 24px rgba(6, 182, 212, 0.3);

  /* ── TRANSITIONS ── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce/overshoot — popIn, wz-done-icon */
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);    /* producción — modales, vistas, steps, screens */
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.2s;
  --duration-slow:   0.35s;

  /* ── LAYOUT ── */
  --container-max:  1200px;
  --container-pad:  32px;
  --sidebar-width:  240px;
  --topbar-height:  60px;
  --bottomnav-height: 64px;
  --nav-height:     64px;
  --bottomnav-clearance: 80px;

  /* ── BREAKPOINTS ── */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 900px;

  /* ── Z-INDEX SCALE ── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-fixed:    100;
  --z-modal:    999;
  --z-overlay:  9999;
  --z-toast:    11000;

  /* ── BACKWARDS COMPATIBILITY ALIASES ── */
  /* @deprecated — eliminar en DS-3 cuando cada página migre a tokens semánticos */
  --bg2:      var(--bg-elevated);    /* → --bg-elevated */
  --bg3:      var(--bg-card);        /* → --bg-card */
  --cyan:     var(--accent);         /* → --accent */
  --teal:     var(--accent);         /* → --accent */
  --teal-l:   var(--accent-hover);   /* → --accent-hover */
  --teal-g:   var(--accent);         /* → --accent */
  --cyan-l:   var(--accent-hover);   /* → --accent-hover */
  --cyan-bg:  var(--accent-bg);      /* → --accent-bg */
  --cyan-dim: var(--accent-muted);   /* → --accent-muted */
  --white:    var(--text-primary);   /* → --text-primary */
  --gray:     var(--text-secondary); /* → --text-secondary */
  --muted:    var(--text-secondary); /* → --text-secondary */
  --muted2:   var(--text-tertiary);  /* → --text-tertiary */
  --text:     var(--text-primary);   /* → --text-primary */
  --green:    var(--success);        /* → --success */
  --yellow:   var(--warning);        /* → --warning */
  --red:      var(--danger);         /* → --danger */
  --amber:    var(--warning);        /* → --warning */
  --purple:   var(--info);           /* → --info */
}

/* ── BASE RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── GLOBAL TYPOGRAPHY ── */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal);
}

a { text-decoration: none; color: inherit; }
img, svg { display: block; }

/* ── FOCUS VISIBLE ── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── SCREEN READER ONLY ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── SKIP LINK ── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 99999;
  background: var(--accent);
  color: var(--text-inverse);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-default);
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── KEYFRAMES ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes shake    { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn   { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes viewIn    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn   { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut  { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.95); } }