/*
 * Bubbles Plugin — Design Tokens
 * variables.css
 * Basado en referencia visual: sidebar minimalista, stats coloridas, tabla limpia
 */

#bubbles-app {

  /* ─── Fondos ──────────────────────────────────────────────── */
  --b-bg:           #ffffff;
  --b-bg-surface:   #f7f7f5;
  --b-bg-input:     #ffffff;
  --b-bg-hover:     #f3f3f1;
  --b-brand:        #082a08;
  /* ─── Texto ───────────────────────────────────────────────── */
--b-text:       #0a0a0a;
--b-text-muted: #180b0b;
--b-text-hint:  #2a2525;

  /* ─── Bordes ──────────────────────────────────────────────── */
  --b-border:       #e8e8e8;
  --b-border-strong: #d0d0d0;

  /* ─── Semánticos ──────────────────────────────────────────── */
  --b-primary:        #1a1a1a;
  --b-primary-bg:     #e8f0fe;
  --b-primary-text:   #1a1a1a;

  --b-success:        #16a34a;
  --b-success-bg:     #dcfce7;
  --b-success-text:   #15803d;
  --b-success-border: #86efac;

  --b-danger:         #ef4444;
  --b-danger-bg:      #fee2e2;
  --b-danger-text:    #dc2626;

  --b-warning:        #f59e0b;
  --b-warning-bg:     #fef3c7;
  --b-warning-text:   #d97706;

  --b-neutral:        #9ca3af;
  --b-neutral-bg:     #f3f4f6;
  --b-neutral-text:   #6b7280;

  /* ─── Stats — colores por categoría (como referencia) ──────── */
  --b-stat-pending-bg:   #fffbeb;
  --b-stat-pending-text: #d97706;
  --b-stat-earned-bg:    #f0fdf4;
  --b-stat-earned-text:  #16a34a;
  --b-stat-tips-bg:      #fdf2f8;
  --b-stat-tips-text:    #9d174d;
  --b-stat-jobs-bg:      #eff6ff;
  --b-stat-jobs-text:    #1d4ed8;

  /* ─── Tipografía ──────────────────────────────────────────── */
  --b-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --b-font-size-sm:  12px;
  --b-font-size:     14px;
  --b-font-size-lg:  20px;
  --b-font-size-xl:  35px;
  --b-line-height:   1.6;
  --b-font-weight:   400;
  --b-font-weight-md: 600;

  /* ─── Espaciado ───────────────────────────────────────────── */
  --b-space-xs:   4px;
  --b-space-sm:   8px;
  --b-space-md:   16px;
  --b-space-lg:   24px;
  --b-space-xl:   32px;

  --b-pad-card:   16px 20px;
  --b-pad-btn:    8px 16px;
  --b-pad-tag:    3px 10px;
  --b-pad-stat:   16px 20px;

  /* ─── Radios ──────────────────────────────────────────────── */
--b-radius-sm:   3px;
--b-radius-md:   6px;
--b-radius-lg:   6px;
--b-radius-xl:   8px;
  --b-radius-full: 999px;

  /* ─── Bordes accent ───────────────────────────────────────── */
  --b-border-width:  1px;
  --b-border-accent: 3px;

  /* ─── Sombras ─────────────────────────────────────────────── */
  --b-shadow-sm:    0 1px 3px rgba(0,0,0,.06);
  --b-shadow-md:    0 2px 8px rgba(0,0,0,.08);
  --b-shadow-focus: 0 0 0 3px rgba(0,0,0,.08);

  /* ─── Transiciones ────────────────────────────────────────── */
  --b-transition:      150ms ease;
  --b-transition-slow: 300ms ease;

  /* ─── Z-index ─────────────────────────────────────────────── */
  --b-z-dropdown: 100;
  --b-z-modal:    200;

  /* ─── Layout ──────────────────────────────────────────────── */
  --b-sidebar-width: 200px;
  --b-card-accent-urgent: var(--b-danger);
  --b-card-accent-normal: var(--b-border);
  --b-card-accent-done:   var(--b-success);
}