/* ============================================================
   Inbox Sales — Design Tokens (CSS Variables)
   Paleta azul (Dowesoft Sales Intelligence)
   ============================================================ */
:root {
  /* ── Brand (azul principal) ──────────────────────────────── */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-800: #1e3a8a;
  --brand-900: #172554;
  --brand:          #2563eb;
  --brand-contrast: #ffffff;

  /* ── Accent ────────────────────────────────────────────────── */
  --accent-500: #3b82f6;
  --accent:          #3b82f6;
  --accent-contrast: #ffffff;

  /* ── Neutrales ─────────────────────────────────────────────── */
  --neutral-50:  #f7f9fc;
  --neutral-100: #f1f4f9;
  --neutral-200: #e5e9f0;
  --neutral-300: #d4d9e2;
  --neutral-400: #b9c2cf;
  --neutral-500: #99a5b6;
  --neutral-600: #738196;
  --neutral-700: #5b677a;
  --neutral-800: #434d5b;
  --neutral-900: #2c323c;

  /* ── Surfaces ──────────────────────────────────────────────── */
  --surface-0:       #f4f7fb;
  --surface-1:       #ffffff;
  --surface-2:       #eef3f9;
  --surface-inverse: #0b1220;

  /* ── Texto ─────────────────────────────────────────────────── */
  --text-1:       #1f2937;
  --text-2:       #4b5563;
  --text-3:       #6b7280;
  --text-inverse: #ffffff;

  /* ── Bordes ────────────────────────────────────────────────── */
  --border-subtle: #e5e7eb;
  --border:        #d1d5db;
  --border-strong: #9aa3af;

  /* ── States ────────────────────────────────────────────────── */
  --state-hover:  rgba(37,99,235,.08);
  --state-active: rgba(37,99,235,.16);

  /* ── Focus ─────────────────────────────────────────────────── */
  --focus-ring-color: rgba(37,99,235,.35);
  --focus-ring:       0 0 0 3px rgba(37,99,235,.35);

  /* ── Semánticos ────────────────────────────────────────────── */
  --success:        #16a34a;
  --success-on:     #ffffff;
  --success-soft:   #e9f7ef;
  --success-border: #b7e3c8;

  --warning:        #f59e0b;
  --warning-on:     #1f1300;
  --warning-soft:   #fff7e6;
  --warning-border: #fad7a0;

  --danger:        #dc2626;
  --danger-on:     #ffffff;
  --danger-soft:   #ffecec;
  --danger-border: #f7b4b4;

  --info:        #0284c7;
  --info-on:     #ffffff;
  --info-soft:   #e6f4ff;
  --info-border: #a6d8ff;

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.14);
  --backdrop:  rgba(16,24,40,.55);

  /* ── Botones ───────────────────────────────────────────────── */
  --btn-primary-bg:    #2563eb;
  --btn-primary-text:  #ffffff;
  --btn-primary-hover: #1d4ed8;

  /* ── Aliases Bootstrap ─────────────────────────────────────── */
  --bs-primary:     #2563eb;
  --bs-success:     #16a34a;
  --bs-warning:     #f59e0b;
  --bs-danger:      #dc2626;
  --bs-body-bg:     var(--surface-0);
  --bs-body-color:  var(--text-1);
  --bs-border-color: var(--border);

  /* ── Aliases semánticos (compatibilidad con módulos) ────────── */
  --color-primary:          var(--brand);
  --color-primary-dark:     var(--brand-800);
  --color-primary-light:    var(--brand-50);
  --color-secondary:        var(--accent);
  --color-secondary-light:  var(--accent-50, #e8f2fd);
  --color-surface:          var(--surface-1);
  --color-background:       var(--surface-0);
  --color-text-primary:     var(--text-1);
  --color-text-secondary:   var(--text-2);
  --color-text-tertiary:    var(--text-3);
  --color-border:           var(--border);
  --color-error:            var(--danger);
  --color-success:          var(--success);
  --color-primary-rgb:      37, 99, 235;
  --color-error-rgb:        220, 38, 38;

  /* ── Landing Page ──────────────────────────────────────────── */
  /* Nombres se conservan por compatibilidad; los valores son la paleta azul. */
  --lp-ink:       #0D1117;
  --lp-ink2:      #1C2333;
  --lp-ink3:      #2A3550;
  --lp-teal:      #2563eb;
  --lp-teal2:     #1d4ed8;
  --lp-teal-glow: rgba(37,99,235,0.18);
  --lp-muted:     #6B7A99;
  --lp-border:    rgba(255,255,255,0.08);
  --lp-white:     #FFFFFF;
  --lp-card:      rgba(255,255,255,0.04);
}

/* ── Tema oscuro ───────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-0:       #0D1117;
  --surface-1:       #1C2333;
  --surface-2:       #2A3550;
  --surface-inverse: #ffffff;
  --text-1:    #e5eaf3;
  --text-2:    #b8c2d6;
  --text-3:    #6B7A99;
  --border-subtle: #1C2333;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
}