/* ════════════════════════════════════════════════════════════════════
   BIGBUDA HQ · DESIGN TOKENS
   Sistema de tokens base · light + dark
   Estilo target: Cloudflare Analytics / Apple HIG / Linear / Stripe / Vercel
   Restricciones: cero gradients · radius 4px · paleta clara · idioma chileno
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── COLOR · superficies y bordes ─── */
  --bg-base:           #F4F4F5;
  --bg-card:           #FFFFFF;
  --bg-elevated:       #FAFAFA;
  --bg-tinted:         #F0F0F0;
  --bg-muted:          #F4F4F5;

  --border-subtle:     #ECECEC;
  --border:            #D4D4D8;
  --border-strong:     #A1A1AA;

  /* ─── COLOR · texto ─── */
  --text-primary:      #0A0A0A;
  --text-secondary:    #525252;
  --text-muted:        #737373;
  --text-tertiary:     #A3A3A3;

  /* ─── COLOR · marca Bigbuda (acento puntual SOLO) ─── */
  --brand:             #6366F1;
  --brand-hover:       #4F46E5;
  --brand-tint:        rgba(99, 102, 241, 0.08);
  --brand-border:      rgba(99, 102, 241, 0.20);
  --brand-foreground:  #FFFFFF;

  /* ─── COLOR · semánticos ─── */
  --success:           #10B981;
  --success-soft:      #ECFDF5;
  --success-border:    #D1FAE5;
  --warning:           #F59E0B;
  --warning-soft:      #FFFBEB;
  --warning-border:    #FEF3C7;
  --danger:            #DC2626;
  --danger-soft:       #FEF2F2;
  --danger-border:     #FEE2E2;
  --info:              #3B82F6;
  --info-soft:         #EFF6FF;
  --info-border:       #DBEAFE;

  /* ─── COLOR · sistema cromático LEAD SCORE (todos los pills/badges) ─── */
  --hot:               #DC2626;    /* score ≥75 */
  --hot-soft:          #FEF2F2;
  --hot-border:        #FEE2E2;
  --warm:              #B45309;    /* score 60-74 */
  --warm-soft:         #FFFBEB;
  --warm-border:       #FEF3C7;
  --cold:              #71717A;    /* score <60 */
  --cold-soft:         #F4F4F5;
  --cold-border:       #E4E4E7;

  /* ─── TIPOGRAFÍA · familias ─── */
  --font-sans:         -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:         "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ─── TIPOGRAFÍA · tamaños (con line-height base 1.5) ─── */
  --text-xs:           11px;       /* Labels, captions, eyebrows uppercase */
  --text-sm:           12px;       /* Helper text · secondary info */
  --text-base:         13px;       /* Body default */
  --text-md:           14px;       /* Body principal · etiquetas */
  --text-lg:           16px;       /* Subtítulos zona */
  --text-xl:           18px;       /* Títulos sección */
  --text-2xl:          22px;       /* H2 */
  --text-3xl:          28px;       /* H1 / KPIs satélites grandes */
  --text-4xl:          40px;       /* Hero secundario */
  --text-5xl:          56px;       /* Hero móvil */

  /* ─── TIPOGRAFÍA · pesos ─── */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ─── TIPOGRAFÍA · letter-spacing ─── */
  --ls-tight:          -0.04em;    /* Hero $48 MM · números muy grandes */
  --ls-snug:           -0.02em;    /* H1 · H2 · KPIs satélites */
  --ls-normal:         -0.005em;   /* Body */
  --ls-wide:           0.06em;     /* Eyebrows uppercase corta */
  --ls-wider:          0.12em;     /* "PIPELINE ACTIVO EN CIERRE" tipo Stripe */

  /* ─── ESPACIADO (escala fija) ─── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;       /* Entre secciones mayores · estándar */
  --space-20:          80px;       /* Entre zonas hero */
  --space-24:          96px;       /* Padding superior pantalla desktop */

  /* ─── RADIOS ─── */
  --radius-xs:         2px;        /* Mini elementos · dots · lines */
  --radius-sm:         4px;        /* Standard del sistema · TODO usa esto */
  --radius-md:         6px;        /* Cards grandes · modales */
  --radius-lg:         8px;        /* Modales completos */
  --radius-pill:       999px;      /* Pills · badges */
  --radius-full:       50%;        /* Avatares · iconos circulares */

  /* ─── SOMBRAS · cero dramatismo ─── */
  --shadow-none:       none;
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-card:       0 1px 0 0 rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 1px 0 0 rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-popover:    0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);

  /* ─── ANIMACIONES · easings y duraciones ─── */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis:     cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:     120ms;
  --duration-base:     220ms;
  --duration-slow:     320ms;
  --duration-emphasis: 480ms;

  /* ─── Z-INDEX ─── */
  --z-base:            0;
  --z-sticky:          100;
  --z-dropdown:        300;
  --z-modal-bg:        500;
  --z-modal:           600;
  --z-toast:           9500;
  --z-tooltip:         9700;
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE · mismas semánticas, valores adaptados
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-base:           #0A0A0B;
  --bg-card:           #131316;
  --bg-elevated:       #1A1A1F;
  --bg-tinted:         #1F1F25;
  --bg-muted:          #1A1A1F;

  --border-subtle:     #1F1F25;
  --border:            #2D2D33;
  --border-strong:     #525252;

  --text-primary:      #FAFAFA;
  --text-secondary:    #A1A1AA;
  --text-muted:        #71717A;
  --text-tertiary:     #525252;

  --brand:             #818CF8;
  --brand-hover:       #6366F1;
  --brand-tint:        rgba(129, 140, 248, 0.12);
  --brand-border:      rgba(129, 140, 248, 0.28);

  --success:           #34D399;
  --success-soft:      rgba(52, 211, 153, 0.10);
  --success-border:    rgba(52, 211, 153, 0.24);
  --warning:           #FBBF24;
  --warning-soft:      rgba(251, 191, 36, 0.10);
  --warning-border:    rgba(251, 191, 36, 0.24);
  --danger:            #F87171;
  --danger-soft:       rgba(248, 113, 113, 0.10);
  --danger-border:     rgba(248, 113, 113, 0.24);
  --info:              #60A5FA;
  --info-soft:         rgba(96, 165, 250, 0.10);
  --info-border:       rgba(96, 165, 250, 0.24);

  --hot:               #FB7185;
  --hot-soft:          rgba(251, 113, 133, 0.16);
  --hot-border:        rgba(251, 113, 133, 0.30);
  --warm:              #FCD34D;
  --warm-soft:         rgba(252, 211, 77, 0.14);
  --warm-border:       rgba(252, 211, 77, 0.28);
  --cold:              #A1A1AA;
  --cold-soft:         rgba(161, 161, 170, 0.14);
  --cold-border:       rgba(161, 161, 170, 0.28);

  /* Sombras en dark son apenas perceptibles · mantener sutil */
  --shadow-card:       0 1px 0 0 rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-card-hover: 0 1px 0 0 rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30);
}

/* ════════════════════════════════════════════════════════════════════
   PREFERENCIAS · respeta accesibilidad y sistema
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BREAKPOINTS · solo referencia (usar en media queries)
   320px  · móvil pequeño
   375px  · móvil estándar (iPhone)
   414px  · móvil grande
   768px  · tablet vertical
   1024px · tablet horizontal / laptop pequeño
   1280px · desktop estándar
   1440px · laptop 14"+
   1920px · desktop ancho
   2560px · 4K
   ════════════════════════════════════════════════════════════════════ */