/* ==========================================================================
   Buzz Design System — Design Tokens
   Extraídos y consolidados de la landing oficial (styles.css + v2.css +
   pages.css). Ver README.md de esta carpeta para la guía completa de uso.
   ========================================================================== */

:root {
  /* ── Marca: escala hue-210 (BuzzDesk) ─────────────────────────────── */
  --brand-50:  #eef6fe;
  --brand-100: #d9ebfd;
  --brand-200: #b9dbfb;
  --brand-500: #54a3f2;  /* logo. SOLO sobre superficies oscuras — 2.66:1 */
  --brand-700: #127fed;  /* focus rings sobre claro — 3.97:1 */
  --brand-800: #1070d1;  /* rellenos, links, nav activa — 4.85:1 AA */
  --brand-900: #0d5cab;  /* hover */
  --brand-950: #0a3d71;  /* pressed */

  /* ── Superficie ────────────────────────────────────────────────────── */
  --bg:          #FBFBF8;  /* blanco cálido, no blanco puro */
  --surface:     #FEFEFD;  /* teñido, no blanco puro */
  --surface-alt: #F4F5F1;
  --ink:         #0B0B0D;  /* 18.5:1 */
  --ink-2:       #3F3F46;  /* 10.1:1 */
  --ink-3:       #696973;  /* 5.23:1 AA — el piso, no bajar de acá */
  --line:        #E6E6E1;
  --line-strong: #D2D2CB;

  /* ── Acento por producto ──────────────────────────────────────────────
     Una sola familia fría, de cian a índigo: nada de verde. Cada producto
     tiene un tono "ink" (AA sobre claro, texto/íconos), uno "vivo" (rellenos,
     dots, halos) y uno "wash" (fondo tenue). El *-rgb es el mismo color que
     *-live en triplete suelto, para usar en rgba() con alfa variable. */
  --crm-ink:   #0E7490;  --crm-live:   #22D3EE;  --crm-wash:   #E6F9FD;  --crm-rgb:  34, 211, 238;   /* cian    */
  --agt-ink:   #0369A1;  --agt-live:   #38BDF8;  --agt-wash:   #E8F4FE;  --agt-rgb:  56, 189, 248;   /* celeste */
  --desk-ink:  #1070D1;  --desk-live:  #54A3F2;  --desk-wash:  #EAF3FE;  --desk-rgb: 84, 163, 242;   /* azul    */
  --wave-ink:  #3B55D9;  --wave-live:  #4C6FFF;  --wave-wash:  #EEF0FE;  --wave-rgb: 76, 111, 255;   /* índigo  */

  /* ── Aurora: los tres tonos con los que se pintan los halos ────────── */
  --aur-1: 34, 211, 238;    /* cian     */
  --aur-2: 84, 163, 242;    /* azul     */
  --aur-3: 108, 140, 255;   /* índigo   */
  --glow-brand: 0 8px 24px -8px rgba(16,112,209,.45);
  --glow-soft:  0 0 0 4px rgba(16,112,209,.10);

  /* ── Badge placeholder / próximamente (ámbar) ──────────────────────── */
  --ph-ink:  #92400E;   /* ámbar 800 — 5.9:1 sobre --ph-bg */
  --ph-bg:   #FEF3C7;
  --ph-line: #F59E0B;

  /* ── Tipografía ───────────────────────────────────────────────────── */
  --sans:  'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --serif: 'Newsreader', ui-serif, Georgia, serif;

  /* ── Espaciado (ritmo de 4) ───────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ── Forma y movimiento ───────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --dur-fast: 140ms; --dur: 200ms; --dur-slow: 320ms;
  --dur-enter: 280ms; --dur-exit: 200ms;
  /* Las curvas nativas de CSS son demasiado débiles: no tienen punch. */
  --ease:      cubic-bezier(.23, 1, .32, 1);     /* ease-out fuerte */
  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);    /* ease-in-out fuerte */

  --shadow-sm: 0 1px 2px rgba(12,30,58,.06);
  --shadow-md: 0 4px 16px -4px rgba(12,30,58,.10), 0 1px 3px rgba(12,30,58,.05);
  --shadow-lg: 0 24px 56px -20px rgba(12,40,80,.20), 0 2px 8px rgba(12,30,58,.06);

  /* ── Retícula ─────────────────────────────────────────────────────── */
  --maxw: 1200px;
  --gutter: 28px;
  --nav-h: 68px;
}

/* Ritmo móvil: retícula y algunos huecos verticales se comprimen bajo 640px */
@media (max-width: 640px) {
  :root { --gutter: 20px; --s9: 72px; --s10: 88px; --nav-h: 60px; }
}